Table of Contents

Next Page

Web Designer's Guide to Adobe Photoshop
Web Designer's Guide to Adobe Photoshop
byChris Tull
Wordware Publishing 2006 (272 pages)
ISBN:9781598220018

Whether your goal is to expand your professional skills or simply handle your local club’s website, this book will help you not only create web pages but also get them working properly on the World Wide Web.

Table of Contents
 | Web Designer’s Guide to Adobe Photoshop
 | Introduction
 | Part I - Web Design Basics
 | Chapter 1 | - | The World of Web Design
 | Chapter 2 | - | Getting Started with Photoshop
 | Chapter 3 | - | Working with Layers
 | Chapter 4 | - | Creating Shapes with Selections
 | Part II - Pulling It All Together
 | Chapter 5 | - | Combining Images
 | Chapter 6 | - | Creating Web Headers
 | Chapter 7 | - | Pulling a Web Page Together
 | Chapter 8 | - | Creating Web Backgrounds
 | Part III - Publishing to the World Wide Web
 | Chapter 9 | - | Working with Dreamweaver
 | Chapter 10 | - | Creating a “Professional” Web Page Style
 | Chapter 11 | - | Designing a “Modern” Web Page Style
 | Chapter 12 | - | Going Live with Your Website
 | Appendix A | - | Top Ten Web Design Mistakes
 | Appendix B | - | Recommended Books
 | Appendix C | - | Web Designer’s Glossary
 | Index
 | List of Figures
 | List of Tables

Next Page


Back Cover

Previous Page
Next Page

Back Cover

While Adobe Photoshop is the standard application for editing images for print, its powerful features also make it useful for editing images placed on the Internet. Web Designer’s Guide to Adobe Photoshop goes beyond an explanation of creating and editing images by focusing on the next step in web development: placing images and graphics into working web pages. Whether your goal is to expand your professional skills or simply handle your local club’s website, this book will help you not only create web pages but also get them working properly on the World Wide Web.

Learn how to:

  • Work with layers, layer styles, and patterns.
  • Create shapes with selections.
  • Combine and crop images.
  • Create web buttons, headers, and backgrounds.
  • Add content to a web page using Macromedia Dreamweaver.
  • Design web pages of various styles.

About the Author

Chris Tull is a writer and graphic designer in the Dallas/Fort Worth area, and the author of Mastering Business Analysis with Crystal Reports 9. He’s a contributing member of many organizations, including the Society for Technical Communication (STC). When not writing, Mr. Tull helps companies design and develop marketing and technical materials and solutions.

Previous Page


Web Designer’s Guide to Adobe Photoshop

Chris Tull

Library of Congress Cataloging-in-Publication Data
Tull, Chris.
Web designer’s guide to Adobe Photoshop / by Chris Tull.
p. cm.
Includes bibliographical references and index.
ISBN-13: 978-1-59822-001-8
ISBN-10: 1-59822-001-2 (pbk.)
1. Adobe Photoshop. 2. Web sites--Design. 3. Computer graphics. I. Title.
TK5105.8885.A38T85 2005
006.6'86--dc22
2005029723
CIP

© 2006, Wordware Publishing, Inc.
All Rights Reserved
2320 Los Rios Boulevard
Plano, Texas 75074

No part of this book may be reproduced in any form or by any means without permission in writing from Wordware Publishing, Inc.

Printed in the United States of America
ISBN-13: 978-1-59822-001-8
ISBN-10: 1-59822-001-2
10 9 8 7 6 5 4 3 2 1
0510

Adobe and Photoshop are registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Dreamweaver is a registered trademark of Macromedia, Inc. in the United States and/or other countries.

All other brand names and product names mentioned in this book are trademarks or service marks of their respective companies. Any omission or misuse (of any kind) of service marks or trademarks should not be regarded as intent to infringe on the property of others. The publisher recognizes and respects all marks used by companies, manufacturers, and developers as a means to distinguish their products.

This book is sold as is, without warranty of any kind, either express or implied, respecting the contents of this book and any disks or programs that may accompany it, including but not limited to implied warranties for the book’s quality, performance, merchantability, or fitness for any particular purpose. Neither Wordware Publishing, Inc. nor its dealers or distributors shall be liable to the purchaser or any other person or entity with respect to any liability, loss, or damage caused or alleged to have been caused directly or indirectly by this book.

All inquiries for volume purchases of this book should be addressed to Wordware Publishing, Inc., at the above address. Telephone inquiries may be made by calling:

(972) 423-0090

Be sure to check out our other books at www.wordware.com.

For Niki, my beautiful wife. Without her, nothing would be possible. And for Abby, our little girl on the way. We can’t wait to meet you!

Acknowledgments

Books are never the result of a single individual. They’re the result of dozens of people’s knowledge, effort, and enthusiasm. So many people helped with this title. We should all have our names listed on the front.

I want to thank Niki — my wife and inspiration for everything I do. She’s a constant miracle in my life, and makes each day better than the last. I also want to thank my little daughter, Abby. She’s taught me so many lessons in life. The amazing thing is she’s taught me these things even though she’s still a month or so away from being born. Image how much more I’ll learn once she’s actually here!

I must also give thanks to Tom and Carole Tull, my parents. They’ve taught me that all is possible in this world as long as you try and believe, no matter what.

Thanks must also go out to my technical editor, Clark Allen. Your advice has made this book a million times better than it could have ever been on its own.

Thank you, Wordware Publishing, especially Wes Beckwith and Beth Kohler. I love Wordware books. They’re the best in the industry. I feel lucky to have worked with you once again.

Finally, I want to thank you…my readers. You teach me much more than you’ll ever know.


Introduction

Overview

Maybe you’ve been asked to take over your company’s website or intranet. Maybe you’re in charge of handling your family’s website, to which you’d like to add some pizzazz. Or maybe you’re already a professional graphic designer and want to update your skills. No matter where you’re coming from, Web Designer’s Guide to Adobe Photoshop is for you.

You couldn’t have picked a better time to familiarize yourself with the Internet — it’s growing exponentially.

Figure 1 illustrates just how dramatic this growth has been over the course of a couple years.

Image from book
Figure 1: The exponential growth of the internet

No one really knows how big the Internet is, and few analysts are prepared to speculate on a figure these days. Whatever the number, it’s definitely in the billions of pages. Google alone has indexed over 8 billion pages…and that’s only the tip of the iceberg.

Any way you figure it, the Internet is huge and continues to grow. The opportunities for a budding web designer are immense and will only increase with time.


About This Book

Web design is a unique blend of technical know-how and creative artistic ability. You don’t need to be a computer programmer or Leonardo da Vinci. However, good web design requires knowing how to:

  • Present material in a pleasing and aesthetic way.

  • Understand design practices related to images for the World Wide Web.

  • Ensure the web pages contain no computer errors, and present material exactly the way you intend.

  • Create web pages that allow readers all across the world, using different computer models, operating systems, and connectivity speeds, to view your pages easily.

In Web Designer’s Guide to Adobe Photoshop, I’ll provide you with the information you need to get up and running with Adobe Photoshop and Macromedia Dreamweaver. I’ll give you some tricks and tips on creating some dazzling effects for your web pages. Essentially, I’ll give you the scoop on everything you need to know to become an expert in web design, whether your goal is to expand your professional skills or simply handle your local club’s website.

Web Designer’s Guide to Adobe Photoshop tells you the stuff you want to know, such as:

  • How do I use Adobe Photoshop?

  • How do I prepare images for the web?

  • How do I get these images into a web page?

  • What are some examples of cool web pages I can create?

  • How do I get these images loaded onto the Internet?


How to Use This Book

You can use this book in a couple of ways:

  • If you want to know everything there is to know about web design, read this book from cover to cover. You’ll learn how to create digital images for the web, how to navigate through the complexities of Adobe Photoshop, what web editors (such as Macromedia Dreamweaver) are, and why you need them. Reading the entire book will start you from square one, and take you all the way to getting your web pages onto the World Wide Web.

  • If you want to find out about a specific topic, flip to that section and start reading. For example, if you’re already familiar with Adobe Photoshop and digital image issues, you might flip to Part II of this book and start working your way through some of the examples. Feel free to read any section in this book without reading what comes before or after.


How This Book Is Organized

This book consists of three parts, each consisting of ideas necessary to understand Adobe Photoshop and web design. We build on these ideas from chapter to chapter, learning as early as the second chapter how to design your first web images.

Part I: Web Design Basics

This portion of the book gets you into the driver’s seat quickly. In this part, you learn what web design is and how Photoshop works. You’ll learn about the Photoshop environment, how to use this environment, and how to define settings to tailor Photoshop to your preferences.

In Part I you’ll also begin building web images applicable to real-world web pages, all the while familiarizing yourself with several key Photoshop features.

Part II: Pulling It All Together

In Part II, you’ll continue building web pages with your newfound knowledge. You’ll learn to create headers, backgrounds, and snazzy images for your web pages.

Part III: Publishing to the World Wide Web

In Part III, you’ll familiarize yourself with how a web editor (in this book Macromedia Dreamweaver) complements your Photoshop work. You’ll learn to pull the web images you’ve designed up to this point into web pages and add content and effects. You’ll also find out where to put your site up for free.


Companion Files

All image files and exercises presented in this book are available in the companion files at www.wordware.com/files/webdesign.


Conventions Used in This Book

In this book, you’ll find several cutesy pictures beside information that is designed to help you better understand the topic. These notes, tips, and cautions are scattered throughout the book and are as follows:

Note

Sometimes, you may thirst for a little more information about a topic. Notes present more details. You can skip over these if you like without missing any of the core ideas. Notes also show you where you can download certain files and examples presented in this book.

This icon also points you to files and exercises presented in the book. These files and exercises are available as companion files at www.wordware.com/files/webdesign.

Tip

Tips present helpful hints or suggestions to help you find your way through potentially tricky ideas.
Caution

Cautions help you avoid pitfalls. These identify potential trouble areas associated with a particular topic.


Tell Me What You Think

As the reader of this book, you are my most important critic and commentator. I value your opinion and welcome your comments. Let me know what you did or didn’t like about the book — or maybe just share some words of wisdom you’re willing to pass on to me.

When you write, please include your name as well as this book’s title in the subject line. I promise to review your comments and respond as quickly as possible. Send e-mail to chrisandniki@yahoo.com.

By the way — thanks for reading!


Part I: Web Design Basics

Chapter List

Chapter 1: The World of Web Design
Chapter 2: Getting Started with Photoshop
Chapter 3: Working with Layers
Chapter 4: Creating Shapes with Selections


Chapter 1: The World of Web Design

Overview

Not to be overly dramatic, but the World Wide Web is one of modern society’s sterling achievements.

It’s everywhere — from the home to the classroom. We use it to communicate at work or to waste some hours playing at night. The World Wide Web’s something that’s always there — accessible 24 hours a day, 7 days a week. The World Wide Web never sleeps.

The beginnings of this technological marvel are humbling. A group of bookish and serious engineers, wishing to exchange information more effectively, designed the World Wide Web in the late 1980s and early 1990s.

The concerns of these early engineers were about function — not necessarily form. On occasion, one of them might add a horizontal bar to separate sections of a document. However, these engineers mostly stuck with simple white or gray web pages that used black text.

Want an idea of how far we’ve come? Check out an early HTML document from The Simple Times newsletter, pictured in Figure 1-1. It dates from 1992.

Image from book
Figure 1-1: An example of an early web page

Eventually, more and more users came to use the World Wide Web. Creative types and designers wanted more control over the format of web pages. In a response to these demands, the web transformed from a stale message board to a flowering communication entity unimagined by those first architects.

To design for the web effectively, you must bring to the table both creative flair and technical savvy. You must know how to make a page appealing without distracting from its message. You must know how to provide images that are interesting, and yet won’t take minutes to view. These and other ideas are what you’ll discover in this book.

Take a look at Figure 1-2 to see how far we’ve come in the past decade.

Image from book
Figure 1-2: An example of the graphical nature of the World Wide Web


Information Every Web Designer Should Know

Michelangelo understood architecture and the human body. Beethoven understood pianos and violins. As a creative type, it’s important you understand a little about the medium for which you’ll be designing — specifically, the World Wide Web.

The World Wide Web is made up of a system of Internet servers that supports hypertext. Hypertext objects (text, pictures, music, programs) are elements on web pages that link to other documents or files (such as other web pages).

Navigating the Web

Hypertext links provide the motion of the web. For example, while reading a web page about The Beatles, you might click on the hypertext phrase The White Album. Clicking this link might take you to a website where you can order the album, or perhaps even invoke a recording of “While My Guitar Gently Weeps.”

A single web page can contain many connections to other documents or files. Overall, the World Wide Web contains a complex web of connections among a huge number of documents, graphics, videos, and sounds.

Web designers can create hypertext for the World Wide Web using a coding language called Hypertext Markup Language (or HTML). Figure 1-3 displays a web page with multiple hyperlinks.

Image from book
Figure 1-3: Hyperlinks on a web page

Although it’s useful to know HTML, it’s not a necessity for web design. With the tools and software programs today (such as Macromedia Dreamweaver, which you’ll learn about later in this book), you can create a web page or add pictures and text to a page without typing a single line of code.


Exploring Digital Images

Digital images are a web designer’s stock-in-trade. Yet, if the images repulse or annoy people — no matter how informative the content of the site — they’ll never give your web page the time of day. Thus, before jumping into your web design efforts, it’s helpful to familiarize yourself with some digital image basics.

Understanding Digital Image Color

If you were to stick a magnifying glass up to your computer monitor, you’d find the screen consists of hundreds of individual dots or units called pixels. These pixels remain in rows and columns, just like a table.

Computer monitors essentially have a palette that holds the following colors:

  • A blob of red paint

  • A blob of green paint

  • A blob of blue paint

You can create other colors by mixing these colors together. Because red, green, and blue are a computer monitor’s primary colors, computer monitors work in RGB color space.

In your computer monitor, each primary color allows for 256 individual shades (ranging from 0 to 255).

Caution

Besides RGB, you may have heard of CMYK. CMYK is another color model, which stands for cyan (blue), magenta (red), yellow, and black. The differences between the two are that CMYK removes color from a white background, whereas RGB adds color to a black background.

So what does all this mean to you? Essentially, RGB works best with electronic display devices (for example, monitors), whereas CMYK works best with color printers. Thus, for our purposes, since we’re designing for the World Wide Web, we’ll use the RGB color model. This will ensure that what you see in Photoshop is what will display on a finished web page.

Digital Image Dimensions

The number of pixels contained in the width and height define the dimensions of an image.

For example, say you’ve got an image 25 pixels wide by 25 pixels high. Web designers typically express that image as having dimensions of 25x25.

As a web designer, you’ll always need to keep image dimension in mind. Your canvas (the computer monitor) contains fixed display dimensions ranging from 640x480 to 1280x1024. Most people keep their monitors at 800x600 or 1024x768. Figure 1-4 displays the Walt Disney web page on an 800x600 screen and on a 1024x768 screen.

Image from book
Figure 1-4: Viewing the same web page at different monitor settings Courtesy of www.disney.com

The Disney web page was designed for best viewing on a 1024x768 monitor display. You can view the Disney web page on a 800x600 monitor display; however, the page requires vertical scrolling.

Tip

I’d recommend designing your images for an 800x600 screen. This will ensure that those looking at your images won’t have to scroll to view your entire screen.

I wouldn’t worry about designing web pages for those using a 640x480 screen setting. Hardly anyone uses that large of a screen resolution anymore, and if they do, they’re probably used to using horizontal scroll bars.

A good rule of thumb is to not make any web image larger than 775 pixels wide. It’s OK to have users scroll vertically if needed, but avoid making images so large that users have to scroll horizontally. No one likes to do that.

When defining your image dimensions, not only will you want to account for the screen dimension, but you’ll also want to account for the web browser. For example, if you know you’re designing for an 800x600 screen (which is the norm), you’d also want to subtract some space for the browser.

Table 1-1 shows the dimensions you can use for your web pages and images depending on the monitor screen size. For the examples in this book, we’ll design images at 800x600.

Table 1-1: Sizes to use to account for screen and browser dimensions
Screen Dimensions | Browser Dimensions
800x600 | 775x420
1024x768 | 1000x600


Types of 2D Graphics

For digital images, there are two basic formats: bitmap images and vector images. This can be a tricky subject, but one that’s bound to come up the more you work with graphics — especially those designed for use on web pages.

Let’s start by talking about bitmap images — the most common type, and the type you’ll use for most of your web design work.

Bitmap Images

Bitmap images (sometimes referred to as raster images) consist of pixels aligned in a grid. As explained earlier in this chapter, pixels are those tiny dots of color that come together to form an image. If you’re familiar with art, pixels are similar to the art technique of pointillism (where tiny dots make up a picture), as used in Georges Seurat’s famous A Sunday Afternoon on the Island of La Grande Jatte painting. If you were to take a magnifying glass to this image, you’d see a pixelated image. Pixelated images are those where each individual square dot of color is visible to the naked eye, as shown in Figure 1-5.

Image from book
Figure 1-5: Viewing a pixelated image

To get a better idea of what bitmap images are — specifically as they apply to the World Wide Web — let’s look at an icon that might be found on a website. Figure 1-6 displays a web button that is 232 by 66 pixels (or 232x66). In other words, there are 232 pixels horizontally and 66 pixels vertically. When combined, these tiny dots form an image.

Image from book
Figure 1-6: A web button

Web Image Resolution

With web images, resolution refers to the number of pixels in an image. Web designers define image resolution in dpi (dots per inch) or ppi (pixels per inch). The larger the image resolution, the more clear and crisp the graphic.

You’d think from that last statement that you’d want to save your images at the highest resolution possible. If you were creating images to display in a local newsletter or some other print media, then yes, you’d want your images to display with the highest resolution.

Unfortunately, higher resolution also means larger image file sizes. In web design, larger file sizes will result in web pages loading slower. If your pages take longer than 20 to 30 seconds to load, there’s a chance users will simply click to another site rather than stick around.

What does this all mean? It means that when designing images for the World Wide Web, 72 to 96 ppi is the resolution you’ll want to use for your images.

GIFs or JPEGs: The Web Images of Choice

Bitmap images include various image file formats, including:

  • GIF (short for Graphics Interchange Format)

  • JPEG (short for Joint Photographic Experts Group)

  • TIFF (short for Tagged Image File Format)

  • PNG (short for Portable Network Graphics)

  • BMP (short for Standard Bit-Mapped Graphics Format)

Of this entire list, you should use only GIFs and JPEGs for images that will be displayed on web pages. These graphics are the most widely supported by web browsers. So is there a difference between GIFs and JPEGs? Should you use one over the other?

Although opinions differ, I would suggest the following rule of thumb with GIFs and JPEGs:

  • Use GIFs for images where you have large flat areas and single colors (such as a diagram). Also, GIFs support transparency(something JPEGs don’t support).

  • Use JPEGs for all other images that aren’t diagrams. JPEGs compress data better than GIFs, meaning they’ll have smaller file sizes.

Vector Images

Although they’re not as common as bitmap graphics, vector graphics are being used more and more frequently within the World Wide Web. A vector graphic consists of many individual objects, with each of these objects defined by mathematical statements. In other words, each object has individual properties assigned to it such as color, fill, and outline.

Vector images are resolution independent. You can increase and decrease the size of vector images to any degree, and your lines will remain sharp — be it on a computer monitor or in print. Figure 1-7 displays an example of a vector drawing that is increased in scale. The size of the file stays the same, and the image does not degrade (as is the case with bitmap images).

Image from book
Figure 1-7: Resizing a vector image with no loss in quality

Unfortunately, photo-realistic imagery cannot be created with vector graphics. Vector images can’t depict the subtle tones of a photograph. They are best suited for logos and graphics without photographic elements.

Vector images must originate from software. You can’t scan an image and save it as a vector file (at least not without using special conversion software). On the other hand, vector images can be converted to bitmaps (a process known as rasterizing).

However, once you convert a vector image to a bitmap image, it loses all the wonderful qualities it had in its vector state. If you convert a vector to a bitmap at a size of 200x200 pixels, and then want the image larger, for the best quality you’ll need to go back to the original vector file and convert the image again.

Currently, you cannot view vector images on the web without downloading a plug-in (such as Flash) for your World Wide Web browser. Thus, you’ll probably need to convert vector images to a bitmap format if they’re used for the web.

Common vector formats include AI (Adobe Illustrator), CDR (CorelDRAW), CGM (Computer Graphics Metafile), SWF (Shock- wave Flash), and DXF (AutoCAD and other CAD software).


Where to Go from Here

You’ve learned a lot of information that will serve as a foundation in your future web design efforts. In the next chapter, you’ll learn the basic skills you’ll need for the web design projects presented within this book.


Chapter 2: Getting Started with Photoshop

Overview

Rather than start this book with a definition of every nook and cranny of Photoshop, let’s instead jump headfirst into the program. Hands-on practice is a lot more fun and effective way to learn anyway.

In this chapter, you’ll learn Photoshop’s major web design tools. After reading this chapter, you’ll know enough to get up and running with the software. You’ll also learn about creating logos — an important but often overlooked area of web design.

Logos are usually only a small part of a website; however, they carry much weight. They’re symbolic…carrying messages about the nature of a company’s business and the company’s style.

With that said, let’s get started.


Style Requirements for Logos

The following table defines a general checklist to consider before designing any logo.

Table 2-1: Requirements for logos checklist
Req. No. | Requirement | Definition
1 | Who is your audience? | Determine which people will view this logo and their interests. What’s the product of the company?
2 | What do competitors’ logos look like? | Take a look at some competitors of the company for which you’re designing the logo. How can you make a logo that stands out in a positive way?
3 | Decide the format for the logo. | Since we’re designing logos for the World Wide Web, you’ll need to create either JPEG or GIF images that are 72 dpi, and use RGB color mode. If these logos were for print work, you’d want to use no less than 300 dpi, and use CMYK color mode.

For the example in this chapter, we’ll design a logo for an attorney- at-law named Jonathan Bing. Keeping this in mind, let’s go through our requirements:

  1. Who is your audience? Who goes to see lawyers? Clients seeking legal help or advice visit lawyers. These individuals are probably facing some legal problem, and thus feeling some apprehension, confusion, and stress. A conservative logo with images that invoke justice and confidence will work best. People seeking lawyers probably won’t respond well to cutesy or cartoony text and symbols.

  2. What do competitors’ logos look like? A quick search on Google for Attorneys at Law brings up a large list of lawyers. Check out a few of their websites. The logos are simple and bold…often using only two colors and simple lines.

  3. Decide the format for the logo. Since this logo is for Jonathan Bing’s website, we’ll create a JPEG image at 72 dpi.

With that said, let’s jump into Photoshop and get to work!


Starting Photoshop

If you’ve worked with computers before, you’re probably familiar with the different methods for firing up software programs. To start Photoshop, you can either:

  • Double-click the Adobe Photoshop icon on your desktop.

  • Select Programs ▶Adobe from your Start menu.

A submenu displays, listing all your Adobe programs. Select Photoshop from this submenu. After starting Photoshop, the splash screen displays.

The Splash Screen

You’ll see a bunch of little messages and files display. These are fonts and plug-ins loading into the software. Loading these files can take a while, so it’s the perfect time to start making a fresh pot of coffee. After the splash screen goes away, the Photoshop workspace displays.

Tip

Photoshop needs memory…more than 384 MB of RAM (or random-access memory) as recommended by Adobe. If your computer displays a message saying it’s out of memory, try quitting some other programs that may be currently running or, if that doesn’t work, try restarting your computer. If all else fails, you may need to add some more memory.

If you’re not sure how to add memory, any computer store will be more than happy to help. Or check out www.memoryx.com.


The Photoshop Work Area

If you’re familiar with Windows or Mac programs, you’re probably familiar with some of the elements of the Photoshop work area display, shown in Figure 2-1.

Image from book
Figure 2-1: The Photoshop work area

The Photoshop work area consists of three main elements: the menu bar, palettes, and the toolbox, as summarized in Table 2-2. Of all these elements, the one you’ll use the most is the toolbox. This element contains many of the tools you’ll need to create your magic.

Table 2-2: Elements of the Photoshop workspace
Element | Description
Menu Bar | The menu bar allows users to perform common functions such as opening and saving files, copying and pasting, accessing specific palettes, and applying effects to images. As you progress through this book, you’ll familiarize yourself with Photoshop’s menus.
Palettes | Palette is just a fancy word for dialog box. The palettes float around — atop your images. Palettes contain added controls for Photoshop, such as extra controls for color. As you work your way through this book, you’ll become familiar with palettes to create many different variations of your images.
Toolbox | The toolbox contains multiple tools for creating, selecting, and manipulating images. You’ll learn about these tools as you progress through this book. Press an icon on the toolbox to select a tool. To select an additional tool (one that’s not one of the displayed default tools), click and hold the right-facing arrowhead found at the lower-right corner of some icons. Pressing this small arrowhead brings up a column of alternate tools you can select. The toolbox is where you’ll be spending much of your time. Thus, we’ll explore this element in more detail in the following pages.


Creating a New Image

Select File ▶New from the menu bar. The New dialog box displays. Enter the following settings into the New dialog box:

  • Width: 150 pixels

  • Height: 50 pixels

  • Resolution: 72 pixels/inch

  • Color Mode: RGB Color 8 bit

  • Background Contents: White

Your screen should look like Figure 2-2.

Image from book
Figure 2-2: Creating a new image

Once you’ve defined these settings, press OK. A white image window displays within Photoshop’s workspace.

Setting Preferences for Web Design

Before going any further, let’s make a couple of preference changes to Photoshop. Remember, Photoshop’s used by a multitude of users, including graphic designers, web designers, and photographers. Not everyone wants Photoshop to work the same way.

Photoshop’s Preferences dialog box allows you to tweak the program to fit your personal likes and dislikes. Let’s take a look at one preference especially useful to web designers: the unit of measure.

Changing the Unit of Measurement

Web designers work in pixels (rather than inches or picas or millimeters). By default, Photoshop sets its units of measurement to inches. Let’s change that. Perform the following steps:

  1. Press Ctrl+K (or select Edit ▶Preferences ▶Units & Rulers from the menu bar). The Preferences dialog box displays.

  2. Change the Rulers and Type drop-down fields to pixels, as shown in Figure 2-3.

    Image from book
    Figure 2-3: Changing the default measurement units to display pixels

  3. Press OK.

    Tip

    If you don’t see rulers along the top and side of the image window, select View ▶Rulers from the menu bar. Make sure you check the Rulers option.

Using Layers

Layers are a powerful feature in Photoshop. To understand how layers work, think of each layer as a piece of transparent paper. They’re like those old acetate slides teachers used to use with overhead projectors…before the days of Microsoft PowerPoint.

Each layer in a Photoshop image contains a part of the image. For example, one layer might contain the text of an image. Another layer might contain the background color. A third layer might contain the cool, 3D bevel style that makes the layer lift from the page. A fourth layer might contain a drop shadow of the entire image.

When all those layers are combined, you get a composite, or a master image, created from all these multiple layers.

The best way to understand layers is to see them in action. If the Layers palette is not already displayed, select Window ▶Layers. See the following sections to learn about layers.

Creating a New Layer

You should see a layer named Background listed within the Layers palette. To create a new layer, click the New Layer button found at the bottom of the Layers palette, as shown in Figure 2-4.

Image from book
Figure 2-4: Creating a new layer with the Layers palette

Selecting Layers

A highlighted layer points out the layer that’s currently active. You can only work on one layer at a time. To access a different layer, click on that layer. Move back and forth from the Background layer to your new layer (called Layer 1).

Caution

You’ll want to create a new layer for each part of your image. This allows you to go back and edit layers individually. Don’t make the common mistake of creating a masterpiece, only to find it’s all one layer (thus making it difficult to change single portions of your image).

Naming Layers

It’s a good idea to give layers a descriptive name. For example, you might call a layer that contains a picture of a computer “Computer.”

  1. Double-click the Layer 1 text within the Layers palette. Notice how the text becomes editable.

  2. Rename this layer Co. Name, as shown in Figure 2-5.

    Image from book
    Figure 2-5: Renaming a layer

  3. Click outside the Layers palette to close the editable text.

Working with the Toolbox

Photoshop’s toolbox contains a collection of tools useful for creating and manipulating images. You’ll learn about these tools in detail as you work your way through this book.

If the toolbox isn’t displayed, select Window ▶Tools from the menu bar. Figure 2-6 displays the tools you’ll use in this chapter. These tools include:

  • Rectangular Marquee tool

  • The Move tool

  • The Pencil tool

  • The Horizontal Type tool

  • The Custom Shape tool

  • The Foreground Color tool

    Image from book
    Figure 2-6: Familiarizing yourself with Photoshop’s toolbox

    Tip

    Notice that some icons in the toolbox contain a right- facing arrowhead. Pressing on these arrowheads brings up added tools you can select.

Creating Text

  1. Select Window ▶Character from the menu bar. The Character palette displays. Notice the Character palette is grouped with the Paragraph palette into a palette set. You can toggle from one palette to the other by selecting either the Character tab or the Paragraph tab.

  2. With the Character tab selected, enter the following settings, as shown in Figure 2-7.

    • Font Family: Palatino Linotype

    • Font Style: Regular

    • Font Size: 10 pt

    • Leading: (Auto)

    • Tracking: 200

      Image from book
      Figure 2-7: Defining text settings in the Character palette

  3. Make sure the Horizontal Type tool is still selected. Click into your image window. In all capital letters, type the following: JONATHAN BING.

  4. Let’s now enlarge the first letter of each word. Using your Horizontal Type tool, drag your cursor over the J in JONATHAN. The J should be highlighted. In the Character palette, change the font size to 12. Do the same for the B in BING. Your screen should look something like Figure 2-8.

    Image from book
    Figure 2-8: Creating and formatting text

Moving Image Elements

We’ll want to add a small logo graphic on the left side of this image. To do that, we’ll first need to move the text.

  1. Select the Move tool, which is the arrowhead icon at the top- right corner of the toolbar.

  2. With this tool selected, click on the Co. Name layer within the Layers palette. Then, click on the JONATHAN BING text within the image window. Click and drag on the text and move it to the right side of the image window. Leave some room to the left of the image window for a graphic you’ll be adding in a moment.

  3. To move your image pixel by pixel, select the Move tool and click on the Co. Name layer in the Layers palette. Then, use the Forward or Back arrow buttons on your keyboard. To move images 10 pixels at a time, hold the Shift key while you press the Forward or Back arrow buttons.

    Tip

    If you’ve selected the Move tool, clicked onto the image window, and found you can’t move your text, it’s probably because the text layer isn’t selected. Go to the Layers tab and highlight the Co. Name layer. Select the Move tool and try moving the text again. The text should move now.

Creating Subtext for Your Logo

  1. In your Layers palette, create a new layer by pressing the New Layer button. Call this new layer Subtext.

  2. Select the Character tab from the Paragraph/Character palette set. Select the Palatino Linotype font. (This font should remain selected since you used it previously when creating the Jonathan Bing text.) However, this time decrease the font size to 8 pt.

  3. Select the Horizontal Type tool. Type the following (all in capital letters) underneath the JONATHAN BING text: ATTORNEY AT LAW.

  4. Use the Move tool to center this text underneath the JONATHAN BING text. Your screen should look like Figure 2-9.

    Image from book
    Figure 2-9: Adding subtext to your logo

Drawing Lines

Although there are a couple of ways of creating lines in Photoshop, let’s start with one of the easiest: drawing with the Pencil tool. Perform the following steps:

  1. From the toolbox, select the Pencil tool.

    Notice the options bar, found underneath the menu bar. Each tool contains its own set of options. Many of the options are also available in various palettes. In Photoshop, you’ll find there are many different ways to perform the same types of actions.

  2. In the options bar, select the Brush drop-down field. Choose a brush diameter of 1, as shown in Figure 2-10. The Brush preset allows you to control the diameter of brush and pencil marks in Photoshop.

    Image from book
    Figure 2-10: Changing a pencil mark’s diameter

  3. In the Layers palette, create a new layer by pressing the New Layer button. Call this new layer Top Line.

  4. With the Pencil tool selected, click somewhere below the J in JONATHAN. Notice a pencil mark appears.

  5. Hold down the Shift key. Click somewhere below the B in BING. You should see a line appear. Holding the Shift key allows you to make a straight, 90-degree line between two points.

  6. If the line seems a little too long or short, you can resize it. Press Ctrl+T. This is the shortcut to Photoshop’s Free Transform, which allows you to resize shapes on the fly. You can also access this by selecting Edit ▶Free Transform from the menu bar.

  7. Notice the line now contains two clear squares on each end and a clear square in the middle. These handles allow you to stretch or shrink the shape. Hold the Shift key and click and drag the ends of the line until the line is about the same length as the JONATHAN BING text.

  8. Press Enter to accept the transformation of the line.

  9. Press Esc to exit from transforming the line, as shown in Figure 2-11.

    Image from book
    Figure 2-11: Creating and transforming a line

Adding a Graphical Element to your Logo

It’s a cliché, but it’s also true: A picture is worth a thousand words.

You can use words and lines with your logos, but they’ll look boring. The graphic you choose is important: It should suggest something about the company, whether it is an image that represents the business, or perhaps something more symbolic, like the company’s personality or style.

You’ll learn to create and manipulate custom shapes as you work through this book. For now, let’s use Photoshop’s Shape tool to draw a simple vector shape.

  1. Go to the Layers palette and create a new layer. Call this new layer Pen.

  2. Select the Custom Shape tool from the toolbox. Refer to Figure 2-6 earlier in this chapter if you need to see what this tool’s icon looks like. (Since the Custom Shape tool isn’t a default tool, you’ll need to select the right-facing arrow on the Rectangle tool to access it.)

  3. With the Custom Shape tool selected, go to the options bar and select the Shape drop-down field. You’ll notice a menu of shapes display. Also make sure that the Shape Layers icon is selected. The Shape Layers icon is located directly below the Image menu item.

  4. Select the right-facing arrow within this shapes menu to display a submenu of additional options.

  5. Select Objects from this drop-down list, as shown in Figure 2-12.

    Image from book
    Figure 2-12: Selecting a shape from the Custom Shape tool’s options bar

  6. Press OK to any message that displays.

Now we can place one of these shape objects on our logo.

  1. Make sure you’re in the new Pen layer you’ve just created and have the Custom Shape tool selected. From the options bar, select the Shape drop-down menu. A shape menu displays.

  2. Select the Pen shape from this shape menu.

  3. Hold down the Shift key and drag your mouse somewhere within the left side of the image window. You should see a pen-shaped object display.

  4. Release the Shift key and your mouse. Press the Enter key to make this shape an image.

  5. Use Free Transform (Ctrl+T) to resize the pen shape if necessary. Your screen should look like Figure 2-13.

    Image from book
    Figure 2-13: Adding a graphical element from the shapes menu to your logo


Where to Go from Here

Save the work you’ve done up to this point as Bing_logo.psd. You’ll continue working with this file in the next chapter. To save, go to the menu bar and select File ▶Save.

Although your logo might look OK for a business card to pass out at conventions, it’s not very exciting. In the next chapter, we’ll explore some of the layer styles to make this plain-vanilla graphic into a dazzling work of art.


Chapter 3: Working with Layers

Overview

So you’ve just created a simple 150x50 logo. And to think it only took a whole chapter to get there. But wait. You’re on the verge of learning the real power of Photoshop. By the end of this chapter, you’ll amaze your friends by producing work that rivals professional designers. How can this be? The answer’s simple. In this chapter, you’ll learn more about the power of Photoshop’s layers.

Unless you’ve worked extensively with graphic or drafting programs, most individuals aren’t used to layers. Layers have a couple of advantages. For one, they help keep your images organized, putting each area of an image into its own separate labeled layer. You did some of this in the last chapter. Your logo contained a layer for different text pieces, the pen graphic, and lines.

But the greatest advantage of layers is they allow you to isolate your edits. You’ll learn how to do that in this chapter.


What Are Layers?

As mentioned in the last chapter, think of layers as pieces of transparent paper. Each layer in a Photoshop image is essentially an entire image itself. By combining these layer images together, you get a composite created of several individual images.

  1. If it’s not open already, fire up the Bing logo file you created in the last chapter.

  2. Then, open the Layers palette if it’s not open already. You can do this by selecting Window ▶Layers from the main menu.

    Note

    You can access the Bing_logo.psd file in the Chapter 2 folder of the download files, available at www.wordware.com/files/webdesign.


The Layers Palette

The Layers palette consists of several controls, including the layers themselves. Figure 3-1 displays the different areas of the Layers palette, and Table 3-1 defines these controls in greater detail.

Image from book
Figure 3-1: Exploring the Layers palette
Table 3-1: The different controls of the Layers palette
Layers Palette Item | Definition
Blend mode | There are 24 different blend modes you can apply to layers. Blends define how the layer blends with other layers. You’ll use some different blend modes as you work your way through this book.
Visibility toggle | The Eye icon allows you to make layers visible or invisible within the image window. Click the Eye icon within the Pen layer. The Eye icon disappears and the pen image becomes invisible. Click the Visibility toggle again. The Eye icon displays, and the pen image appears once again on your image window.
Layer | Anytime you create or paste something into an image, Photoshop adds another layer. Layers allow you to move parts of your image independently of the rest of your image. Layers give you the ability to make changes and experiment with parts of your image without screwing up the image as a whole. Layers have a stacking order, from the bottom up. This means the last layer in the Layers palette is the bottommost layer within the entire image. Other layers rest on top of this layer. You can change the order of layers by holding and dragging a layer above or below other layers.
Layer name | By default, Photoshop names new layers “Layer x,” where x represents a number starting at 1. You can change these names, as you did in the last chapter when you created new layers. It’s a good idea to name your layers for easy reference and to keep yourself organized.
Opacity/Fill | Opacity and Fill are similar features. Opacity affects transparency over everything in a layer (the shape, a drop shadow associated with the shape, etc.).

Besides these controls, Photoshop contains a few layer locking and layer modification options. Let’s look briefly at these controls before starting some hands-on work with layers.

The Layer Modification Options

The Layer Modification options allow you to make various changes and add effects to your layers. Figure 3-2 summarizes the Layer Modification options available.

Image from book
Figure 3-2: Exploring the Layer Modification options of the Layers palette

The following list summarizes the Layer Modification options:

  • Link Layers: When you link two or more layers, the layers essentially act as one layer. You can edit text in either layer. Moving one layer moves both layers. Linking allows changes in one layer to occur in both layers.

    To link layers, first select the layers you want to link. You can do this by holding down the Ctrl key (for non-consecutive layers) or the Shift key (for consecutive layers) as you click on the layers you wish to link. Then click the Link Layers icon in the bottom-left corner of the Layers palette.

    Tip

    In earlier versions of Photoshop, the Layers palette contained a linking column to the left of the Layer Name column. This has been removed in Photoshop CS2 and instead moved to the bottom of the Layers palette to allow users to link layers faster.

  • Add Layer Style: Layer styles are settings you can apply to layers. Examples of layer styles include drop shadows and color overlays. You’ll look at changing some layer styles later in this chapter.

  • Add Layer Mask: Layer masks allow you to edit images without changing the base image. Layer masks allow you to apply black to an image to cover up areas of image data, white to reveal parts of an image, and gray values to reveal image data at various degrees of transparency.

  • Create New Layer Style: Clicking this option allows you to group layers with similar layer content into a layer set. Layer sets are folders in which you can place a collection of individual layers.

    Layer sets are useful when working with images that contain so many layers that you’re finding yourself confused and unorganized.

  • Create New Fill or Adjustment Layer: This option allows you to apply color modifications to your image without permanently affecting the image content. For example, you can make text brighter or add a stone-pattern style to a layer without altering the image (the original pixel information never changes).

  • Create New Layer: You’ve already explored this a little in the last chapter, as you added new layers to your logo. Clicking this option allows you to create a new layer above the currently active layer.

  • Delete Layer: Don’t like a layer and want to get rid of it? This option allows you to delete the currently selected layer. Photoshop always makes you confirm the deletion before it deletes the layer.

    Note

    If you only have one layer, you cannot delete it. Photo- shop requires all images to always have at least one layer.

The Layer Lock Options

The Layer Lock options allow you to limit the ability to edit layers. There are four Layer Lock options, as shown in Figure 3-3. These options are:

  • Lock Transparent Pixels: This option allows you to lock transparent areas of a layer (you may edit only non-transparent areas when this lock is turned on).

  • Lock Image Pixels: This option allows you to lock pixel information, thus not allowing you to change the color or size of an image.

  • Lock Position: This option allows you to lock pixel position. Although you can change the color of images within this layer, you cannot move them or change their size.

  • Lock All: This option locks the entire layer.

    Image from book
    Figure 3-3: Exploring the Layer Lock options of the Layers palette

But enough of all this observation and definition stuff. Let’s get our hands dirty with Photoshop, and put theory into practice. We’ll use the Bing_logo.psd file you saved in the last chapter. Since we just finished talking about locked layers, you may have noticed a Padlock icon on the Background layer. Let’s begin our hands-on practice there.


The Background Layer

Photoshop creates all new files with a locked Background layer, as shown in Figure 3-4.

Image from book
Figure 3-4: A locked Background layer

Unlike regular layers, a locked layer cannot be changed until it is unlocked. For example, you can’t move it, apply transparency, or apply layer adjustments. Let’s unlock this layer.

Unlocking Layers

  1. Open the Bing_logo.psd file if it is not already open.

  2. In the Background layer, double-click on the Padlock icon. A New Layer dialog box displays.

  3. Type in a new name for the layer, as shown in Figure 3-5. Type the name Background since we still consider this our background layer.

    Image from book
    Figure 3-5: Unlocking a locked layer with the New Layer dialog box

  4. Press OK. You’ll now see the Padlock icon is gone.

    Note

    You only need to rename background layers to unlock them. For all other layers, simply highlight the layer you wish to lock (or unlock) and click the Lock All icon (from the Layer Lock options).
    Tip

    The Lock All option is handy, especially if you’re creating images for clients. You can provide them with your final images with all layers locked. That way, if they want to change your work, they’ll need to unlock the layer first. This will help prevent editing of your completed images by others.


Using Layer Styles

Layer styles are cool visual effects you can add to each layer of your image. Specifically, there are two options you can apply to layers. These are:

  • Blending Options: This option allows you to alter the way colors blend within your layers. There are 10 blending options you can apply to layers:

    • Drop shadow

    • Inner shadow

    • Outer glow

    • Inner glow

    • Bevel and emboss

    • Satin

    • Color overlay

    • Gradient overlay

    • Pattern overlay

    • Stroke

  • Style Options: This option contains preset styles for your layers. Photoshop groups these styles into libraries. For example, there are Text Effect styles, Rollover Button styles, and Abstract styles. You’ll learn more about some different styles available in Photoshop in Chapter 10.

Accessing the Layer Styles

In Photoshop, there are often many ways to access the same option, command, or feature. Often, it’s just a matter of habit or preference; go with whichever way feels right to you.

The Layer Styles feature, for example, can be accessed in several ways.

Select the Background layer, then press the Layer Style icon, found at the bottom of the Layers palette. A drop-down menu displays, as shown in Figure 3-6. This drop-down menu contains the various styles you can apply to your layer.

Image from book
Figure 3-6: Selecting styles for your layers

You can select individual style options from this menu or choose the Blending Options item from this drop-down menu. Selecting Blending Options displays the Layer Style dialog box, as shown in Figure 3-7. The Layer Style dialog box gives you access to all layer styles at once.

Image from book
Figure 3-7: The Layer Style dialog box
Tip

You can also access the Layer Style dialog box a couple other ways. For all methods, you’ll first need to select the layer to which you wish to add a style.
An alternative method (as opposed to the first method shown in Figure 3-6) involves right-clicking on the layer to which you wish to add a style. A submenu displays. Select Blending Options from this submenu to display the Layer Style dialog box.

Using the Blending Options

Notice the 10 different options you can add to your layers. These options appear on the left side of the Layer Style dialog box as check boxes. These are the same layer styles displayed when you clicked the Layer Style icon at the bottom of the Layers palette.

Move the Layer Style dialog box over on your screen so you can see your Bing logo file. Click on a few blending option items to see what happens.

Once you’ve seen some of the different blending options, uncheck any boxes you’ve checked. It’s time to get to work.

  1. Check the Bevel and Emboss check box. You’ll notice the background now has a rounded, 3D edge to it. Notice, however, that the edge gets in the way of our text. Let’s change the angle of the bevel and emboss.

Changing Blending Options Settings

  1. Click on the Bevel and Emboss text label. The right side of the Layer Style dialog box now displays additional bevel and emboss options.

    Note

    You can access more settings for all these blending options in this same manner — by clicking the option’s text label.

  2. In the Shading section, change the angle to 60º, as shown in Figure 3-8. Then press OK. Notice the bevel and emboss angle effect on your logo changes.

    Image from book
    Figure 3-8: Changing settings of the Bevel and Emboss blending option

Let’s change some blending option settings associated with your other layers. Perform the following steps:

  1. Select the Co. Name layer. Right-click in this layer and choose Blending Options to access the Layer Style dialog box.

  2. Check the Drop Shadow, Bevel and Emboss, and Color Overlay check boxes.

  3. Left-click once on the Color Overlay option. The right side of the Layer Style dialog box displays color overlay settings you can change.

  4. Left-click once on the colored rectangle (next to the Blend Mode drop-down field). The Color Picker dialog box displays.

  5. In the Color Picker dialog box, change the color of the image in this layer to a blue. Enter the following RGB numbers, shown in Figure 3-9.

    • R: 13

    • G: 31

    • B: 124

      Image from book
      Figure 3-9: Changing the color overlay in the Color Picker dialog box

  6. Press the OK button on the Color Picker dialog box.

  7. Press OK in the Layer Style dialog box. The JONATHAN BING text should contain a drop shadow, appear slightly rounded, and now appear blue.

Copying and Pasting Layer Styles

For all other layers in your image (the Subtext layer, the Top Line layer, and the Pen layer), we want to add a drop shadow and apply the Bevel and Emboss option. You can open each layer’s Layer Style dialog box and do this manually. Or, you can make these changes in one layer, and then copy and paste them into other layers. Try the following to copy and paste blending options:

  1. Select the Subtext layer. Right-click in this layer and select Blending Options. The Layer Style dialog box displays.

  2. Check the Drop Shadow and Bevel and Emboss check boxes.

  3. Click OK to save the changes.

  4. Right-click on the Subtext layer again. This time, select the Copy Layer Style option, as shown in Figure 3-10.

    Image from book
    Figure 3-10: Copying layer styles from one layer to another

  5. Select the Top Line layer. Right-click in this layer. From the right-click menu, select Paste Layer Style. The Drop Shadow and Bevel and Emboss blending options paste into this layer.

  6. Select the Pen layer. As you did in the previous step, right-click in this layer. Select Paste Layer Style from the submenu. Again, the Drop Shadow and Bevel and Emboss blending options paste into this layer.

    Your logo should look something like Figure 3-11.

    Image from book
    Figure 3-11: Adding blending options to your logo


Adding Patterns to Your Layers

Photoshop styles are snazzy graphical looks you can apply to your images. Photoshop contains several preset patterns available for your layers, grouped into multiple libraries. Right-click on the Background layer, and select Blending Options from the submenu that appears. You’ll notice the Bevel and Emboss check box already marked from before. Then, perform the following:

  1. Click the Pattern Overlay check box.

  2. Left-click once on the Pattern Overlay text label. The right side of the Layer Style dialog box displays the Pattern Overlay settings.

  3. Click the right-facing arrow next to the Pattern drop-down field. A submenu displays, filled with thumbnails of preset layer patterns.

  4. Select the right-facing arrow in this submenu. Another submenu that contains more preset patterns displays to the right.

  5. Select the Rock Patterns option from the submenu, as shown in Figure 3-12.

    Image from book
    Figure 3-12: Accessing preset patterns

  6. A message box displays, asking if you wish to replace the current patterns. Press OK.

  7. Select the Light Marble pattern from the thumbnail submenu.

    Tip

    If you hover your mouse over the thumbnail images, a text label displays. This label allows you to view the names of the different thumbnail images.

  8. Press OK in the Layer Style dialog box. Your logo should now look like Figure 3-13.

    Image from book
    Figure 3-13: Spicing up your logo with a light marble pattern


Managing Layers

Although there aren’t many layers to keep track of with this logo, you’ll find the more complex the images you create the more you’ll need to know how to manage layers. Managing layers is helpful not only for you but also for other collaborators who might work with your images.

If you’re an organizational freak, you may find the following methods useful in your web design work.

Changing the Order of Layers

To change the stacking order of layers, click and drag the layer you wish to move above or below the other layers. The pointer should turn into a closed fist as you grab and drag a layer, as shown in Figure 3-14. A solid black line points out when a layer is ready to be dropped. To drop a layer, release your mouse button.

Image from book
Figure 3-14: Changing the layer order

Try dragging the Co. Name layer above the Subtext layer.

Note

The order of layers is important, especially when layers overlap each other. For example, you wouldn’t want to move the Background layer to the top of your Layers palette, because it would cover up all other layers.

Creating Layer Sets

Another useful organizing tool is to group layers of similar content into layer sets. Layer sets are folders into which you can collect several individual layers.

Notice that our logo image has two layers that contain text. Let’s group these into a layer set. Perform the following:

  1. The Layer Set folder will display above the currently active layer. We’ll want our layer set to display above the Co. Name layer (which should now be above the Subtext layer), so select the Co. Name layer.

  2. Select the New Group button at the bottom of the Layers palette. A new layer set folder displays above the Subtext layer.

  3. The layer set defaults to the name Group x, where x stands for the number of layer sets you’ve created (since last closing Photoshop). Double-click on this Group x text.

  4. You can now edit the layer set name. Change it to Text.

  5. Click on the Co. Name layer and drag it over the folder icon associated with your new layer set. Release your mouse. You’ve just placed the Co. Name layer into this layer set.

  6. Do the same for the Subtext layer. Drag it over the folder icon associated with your new layer set. When the folder opens, release your mouse. You’ve just placed the Subtext layer into this layer set.

  7. You can expand or collapse the layer set (to view or hide its contents) by clicking on the gray arrow next to the Text layer set. Figure 3-15 shows the expanded Text layer set with your text layers now organized inside.

    Image from book
    Figure 3-15: Organizing layers with layer sets

Save the changes you’ve made to the Bing_logo.psd file. You’ll return to it later.


Where to Go from Here

In the next chapter, you’ll expand on your newfound knowledge by exploring Photoshop selections. Photoshop selections allow you to grab parts of existing images and combine them with other images. You’ll learn about Photoshop’s Selection tools to isolate areas and manipulate images. Selection tools are a powerful feature of Photoshop and an indispensable tool for web designers.


Chapter 4: Creating Shapes with Selections

In the previous chapters, you created an image using text and a custom shape. You then added some effects to your newly created layers. You’re probably ready now to take your web images to the next level. You want to learn to create shapes, as well as isolate parts of existing images. To do all that, you’ll need to use selections — another important area of Photoshop for the web designer.

In this chapter, you’ll learn about Photoshop’s Selection tools by creating web buttons for the website of Jonathan Bing, attorney-at-law, your first client.

What Are Selections?

Selections are areas of an image you wish to isolate from the rest of an image. With this isolated portion (or selection), you can now modify this area, or paste it onto another image. For example, say you have a digital image of you with an ex-boyfriend or ex-girl- friend. You love how you look in that picture, but would love to get rid of the ex and throw in an image of your favorite movie star.

You can also use selections to make shapes that you tweak into images. In this chapter, you’ll explore creating shapes with selections to build web buttons. In the next chapter, you’ll look at using selections to isolate and combine graphics into a single image.


Style Requirements for Web Buttons

Web buttons are images that allow users to navigate a website. Web buttons should complement the look and feel of your website, as well as allow visitors to navigate through your site easily.

Unfortunately, many websites often do one of the following:

  • Use either flat or boring web buttons.

  • Use graphical buttons that don’t match the style of the rest of the website.

  • Don’t use web buttons at all, often making the website difficult to navigate.

In this chapter, you’ll learn to make rounded web buttons, all the while learning about Photoshop’s Selection tools.


Creating a Web Button

  1. Create a new layer. Here are the settings to use for this new image:

    • Width: 75 pixels

    • Height: 25 pixels

    • Resolution: 72 pixels/inch

    • Color Mode: RGB Color 8 bit

    • Background Contents: Transparent

  2. Once you’ve done this, create a new layer. Name the new layer Circle.

Let’s now take a look at the Selection tools that are available from the toolbox.

Exploring Photoshop’s Selection Tools

Photoshop’s Selection tools, as shown in Figure 4-1, allow you to manipulate images. This might involve moving an image around the image window or cutting out a part of some larger image to use in your website. Table 4-1 defines Photoshop’s Selection tools. You’ll learn more about these tools in this and the next couple of chapters.

Image from book
Figure 4-1: Finding Photoshop’s Selection tools
Table 4-1: Understanding Photoshop’s Selection tools
Selection Tool | Definition
Marquee tools | These tools allow you to grab or create square or circular selections, selections of a single row of pixels, and selections of a single column of pixels. To select any of the Marquee tools not displayed, click and hold on the right-facing arrow at the lower-right side of the Marquee tools icon. A submenu displays, allowing you to select any Marquee tools you wish.
Lasso tools | These tools allow you to create irregularly shaped selections. Although some Photoshop users like these tools, I find them difficult and unnatural to use. I prefer the Pen tool to the Lasso tools. The Pen tool, by the way, is one of the most important tools you can master within Photoshop. Learn to use the Pen tool (which we cover in this chapter and in Chapter 6), and you’ll find there’s nothing you can’t do with Photoshop.
Crop tool | This tool allows you to cut out (crop) a piece of an image. It is useful for quickly removing extra areas of an image you don’t want to use. Unfortunately, the Crop tool only allows you to crop using rectangular or square shapes. To crop an area that is not a rectangular or square shape, you’ll need to use the Marquee tools, the Lasso tools, or my favorite — the Pen tools.
Move tool | You’ve explored this tool in previous chapters. The Move tool allows you to move an image around the image window. To use this tool, you must first select the layer that contains the image you want to move. With the proper layer selected, you can then select the Move tool and move any images on that layer around.
Magic Wand tool | The Magic Wand tool may have you thinking of The Lord of the Rings or Harry Potter. But no — this tool won’t give you the power to fight mountain trolls or werewolves. The Magic Wand tool works differently from other Selection tools. Rather than drawing a selection path yourself, you simply click the Magic Wand in the area you wish to select. Photoshop then creates (as if by magic) the selection for you. Photoshop creates the selection based on related colors. The Magic Wand’s OK, but again… I guess I’m biased toward the Pen tool. It provides the best results.
Slice tool | The Slice tool allows you to “cut up” your images for your web page. You’ll learn more about the Slice tool in Chapter 7.
Painting tools (in Quick Mask mode) | Photoshop allows you to use the Painting tools to create selections in the Quick Mask mode. The Quick Mask mode allows you to make a selection by painting over the area you wish to select.
Pen tools | The Pen tools can do nearly everything. You can use them to draw any shape from a circle to a strange silhouette of a one-eyed one-eared flying purple people eater. The Pen tools also allow you to make selections of any shape or size. The Pen tools are mightier than the sword. They’re also mightier than the Lasso tools, I think.

Creating Shapes with the Marquee Tools

The Marquee tools, shown in Figure 4-2, allow you to make rectangular or circular selections. The four Marquee tools are:

  • Rectangular Marquee tool

  • Elliptical Marquee tool

  • Single Row Marquee tool

  • Single Column Marquee tool

    Image from book
    Figure 4-2: Exploring the Marquee tools

Follow these steps to create a circle:

  1. Select the Elliptical Marquee tool.

  2. Select the Circle layer.

  3. Hold down the Shift key, then click and drag to create a perfect circle, as shown in Figure 4-3.

    Image from book
    Figure 4-3: Creating an elliptical selection

Photoshop represents selections with a moving dotted line…it almost looks like ants marching around your selection.

Tip

Holding down the Shift key while you create a selection will result in a perfect square or circle (rather than a rectangle or oval).
Holding down the Alt key while you create a selection will result in a shape drawn from a center point (the point where you click is the center point).
You can also hold down the Shift and Alt keys together to create a perfect square or circle from a center point.

Selecting Colors with the Toolbox

In the last chapter, you changed the color of your images in the Layer Style dialog box. That’s a great method to use if the image is already created (for example, you’ve already created the pen shape, and want to go back and give it a different color).

However, in this chapter, we’re still in the beginning stages of creating a shape (your web button). Say you want to make your web button the blue color you used in Jonathan Bing’s logo.

You have two choices. You can create your shape, access the Layer Style dialog box, and change the Color Overlay (as you did in the last chapter). Or you can use the toolbox and fill the shape from the start with that blue color. Let’s try this second scenario.

  1. Double-click the Foreground Color square on the toolbox. The Color Picker displays.

  2. In the Color Picker dialog box, change the RGB colors to the blue color in which you originally typed Jonathan Bing’s name, as shown in Figure 4-4.

    Image from book
    Figure 4-4: Selecting a foreground color

  3. Click OK on the Color Picker dialog box.

  4. Select the Paint Bucket tool from the toolbox. With this tool selected, click into your circle selection. It should now fill with your blue color. This circle will act as the rounded edge of your web button.

    Note

    The Paint Bucket tool is the sixth tool on the right side of the toolbox.

Creating a Selection from an Image

You’ve just learned to make a shape using the Marquee tools. Let’s now create our first selection from an existing shape. Here’s a trick on extending your circle into a button by using selections. This exercise will help you understand how selections work.

  1. Make sure you’re still in the Circle layer. Press Ctrl+D to deselect the circle.

  2. From the toolbox, select the Single Marquee Column tool from the Marquee tools. Select the Add to Selection icon in the options bar. We need to do this because we want to add another selection to the circle you just created.

  3. Zoom in if necessary (by pressing Ctrl+). With the Single Column Marquee tool selected, move your cursor above and outside the blue circle, and press the left mouse button. A single rectangle line displays, as shown in Figure 4-5.

    Image from book
    Figure 4-5: Selecting a single column of pixels from an image

    You can now select a single column of pixels.

  4. Click the Move tool on the toolbox. Then, hold down the Shift key and press the Left Arrow key (on your keyboard) two times. Notice that you’ve isolated (selected) a portion of your image and moved it, as shown in Figure 4-6.

    Image from book
    Figure 4-6: Moving an isolated area of an image

  5. Use Ctrl+Alt+Z to undo the moving of your single column of pixels. Hit Ctrl+Alt+Z until your image window looks like Figure 4-5 again.

  6. With this one-pixel column selected, press Ctrl+T (or select Edit ▶Free Transform) from the menu bar.

  7. Hover your cursor over the single column selection until it turns into a double-headed arrow. Then click and drag the selection all the way to the left of your image window, as shown in Figure 4-7.

    Image from book
    Figure 4-7: Free Transforming a one-pixel column

  8. Press the Enter key to apply the Free Transform changes. Then press Ctrl+D (or choose Select ▶Deselect from the menu bar) to deselect your image. You’ve now got a nifty button shape with which to begin working.

Adding Blending Effects

Give your button some of the cool blending effects you learned in the last chapter. For example, try the following:

  1. Add a Drop Shadow effect.

  2. Add a Bevel and Emboss effect.

Your button should look like Figure 4-8.

Image from book
Figure 4-8: Adding blending effects to your web button

Adding Text to Your Web Button

Let’s add some text to this web button.

  1. Select the Text tool from the toolbox.

  2. Select Window ▶Character. The Character palette displays. In the Character palette, change the following:

    • Set the Font Family drop-down field to Palatino Linotype.

    • Set the Font Style drop-down field to Bold Italic.

    • Set the Font Size to 10 pt.

    • Change the Tracking (letter spacing) to 200.

    • Change the anti-aliasing method to Sharp.

    • Change the text color to white. If you double-click the text color box, the Color Picker dialog box displays. Type 255, 255, 255 in the RGB boxes.

    Press OK.

    Note

    You can also access the text options within the options bar (which resides directly below the menu bar).

    Image from book
    Figure 4-9: Changing the text options from the Character palette

  3. Now type the word HOME in all capital letters.

  4. Once you’ve done this, drag your Text tool cursor over just the letter H to highlight it. Then, return to the Character palette and make the letter H two points larger by selecting 20 pt in the Font Size drop-down field.

  5. Add a Bevel and Emboss blending option to the HOME text.

  6. Finally, center the text as needed using the Move tool. Your button should look like Figure 4-10.

    Image from book
    Figure 4-10: Adding text to your web button


Using Preset Styles with Your Web Button

Looking at the blue color of your button, you might feel it’s a little too bold. (For some reason all that blue makes me think of clowns or cartoons.) It just doesn’t feel right for a lawyer’s website.

We can change things up a little bit by exploring Photoshop’s preset styles. Styles are Photoshop designs you can apply to an entire layer. These preset styles contain a number of blending effects thrown together (by the nice people at Adobe) into a single design you can apply at the click of a button.

You can access these styles the same way you accessed the blending options.

  1. Right-click on the Circle layer and select Blending Options from the submenu. The Layer Style dialog box displays.

  2. Now select Styles on the left side of the dialog box instead of Blending Options, as shown in Figure 4-11.

    Image from book
    Figure 4-11: Accessing Photoshop’s preset styles

    When you select Styles from the left side of the Layer Style dialog box, preset styles display in the middle of the dialog box.

  3. To view the different preset style libraries, click the right-facing arrow on the Layer Style dialog box. A submenu displays, with a list of style libraries at the bottom of the submenu.

  4. Select Text Effects 2 from the submenu.

  5. A dialog displays that asks if you wish to replace the current styles with the Text Effects 2 styles. Press OK to replace the current style.

  6. Select the Dark Red Bevel style, as shown in Figure 4-12.

    Image from book
    Figure 4-12: Selecting a preset style for your web button

  7. Press OK on the Layer Style dialog box. Your button should now contain a dark red bevel, as shown in Figure 4-13.

    Image from book
    Figure 4-13: Adding a dark red bevel style to your web button

  8. Save your work as bing_home.psd.


Defining a Button (for a Rollover Effect)

You’ve probably seen rollover effects on the World Wide Web. An image changes when a visitor passes the mouse over an area of an image. Rollovers involve switching one image for another.

With your bing_home.psd button open in Photoshop, perform the following:

  1. Hold down the Shift key. Click the Circle layer and the Home layer.

  2. Right-click on the selected layers. A submenu displays.

  3. Select Duplicate Layers. A Duplicate Layers dialog box displays, as shown in Figure 4-14.

    Image from book
    Figure 4-14: Accepting your duplicate layers

  4. Press OK in the Duplicate Layers dialog box. Copies of the button and Home layers display.

  5. Rename the copied layers as button mouseover and HOME mouseover.

  6. Right-click the button mouseover layer. Select Blending Options from the submenu that displays. The Layer Style dialog box displays.

  7. Left-click on the Pattern Overlay option. Detail about the Pattern Overlay option displays at the right side of the Layer Style dialog box.

  8. Click the right-facing arrow in the Pattern box. A drop-down menu displays. Select the Color Paper item from this drop- down menu, as shown in Figure 4-15.

    Image from book
    Figure 4-15: Changing the pattern overlay

  9. Click OK to the message box that asks if you wish to replace the current pattern with the Color Paper pattern.

  10. From the Color Paper patterns, select the Blue Crepe pattern, displayed in Figure 4-16.

    Image from book
    Figure 4-16: Selecting the Blue Crepe pattern

  11. Go back to the Blending Option check boxes. Check the Inner Shadow check box. This gives the impression of a pushed- down effect.

  12. Click on the Stroke option. The Stroke detail displays at the right side of the Layer Style dialog box.

  13. Change the Fill Type drop-down field to Pattern.

  14. Select the Blue Crepe pattern from the Pattern box, as displayed in Figure 4-17. Then press OK on the Layer Style dialog box.

    Image from book
    Figure 4-17: Selecting the Blue Crepe pattern

  15. Select the HOME mouseover button. Then select the Move tool. Move your text down a couple of pixels (you can press the Down Arrow key three times). This (along with the changed pattern and Inner Shadow) will create a pushed-down effect. Your button should look like Figure 4-18.

    Image from book
    Figure 4-18: The pushed-down effect of your Home mouseover button


Where to Go from Here

Now that you’ve gotten the hang of creating buttons, create two more. Create a Contact button and a Services button. Create two versions of each button, like you did with the Home button in this chapter: one in the Dark Red Bevel style and one in the Blue Crepe style. You’ll need these buttons later in this book when you piece the Jonathan Bing website together. Save these files as bing_contact.psd and bing_services.psd.

Of course, you can always go to www.wordware.com/files/web- design to download these files.

In the next chapter, you’ll continue working with Photoshop’s Selection tools as you learn to isolate, crop, and combine images. You’ll continue exploring the talents of the Marquee tools, and you’ll also use the Lasso and Magic Wand tools.


Part II: Pulling It All Together

Chapter List

Chapter 5: Combining Images
Chapter 6: Creating Web Headers
Chapter 7: Pulling a Web Page Together
Chapter 8: Creating Web Backgrounds


Chapter 5: Combining Images

Overview

In the last chapter, you jumped into selections by creating a web button. In this chapter, we’ll continue exploring the power of selections — specifically how you can use them to isolate and combine existing images.

Rather than create images from scratch, web designers save time by grabbing and tweaking existing images. These existing images might come from many sources, including digital photos, scanned images, and digital artwork.

Note

You’ll find some good, general images in the companion files that you can use in your future web design endeavors. You’ll find these in the Extras folder.

A web designer should feel comfortable with manipulating images, such as separating several images from their original formats and then combining them all into one continuous image. The best way to see how all this works is through hands-on practice.

Note

In the companion files, open the following files in the Chapter 5 folder:

  • Bing_Profile.jpg

  • World.jpg

  • Bing_Building.jpg

Your Photoshop work area should look something like Figure 5-1.

Image from book
Figure 5-1: Opening existing files in Photoshop


Removing and Combining Parts of Images

Now that you’ve got these images opened, let’s begin. We’re going to combine these into a single image you’ll use as a web page title bar within your website (which you’ll piece together in Chapter 7).

Let’s design for an 800x600 screen resolution (a good standard to use nowadays). As mentioned in Chapter 1, this size also ensures that we leave room for the web browser and that users won’t have to scroll to view your web page.

Perform the following steps:

  1. Select File ▶New from Photoshop’s menu bar. The New dialog box displays.

  2. Enter the following in the New dialog box:

    • Width: 775 pixels

    • Height: 420 pixels

    • Resolution: 72 pixels/inch

    • Color Mode: RGB Color/8 bit

    • Background: Transparent

  3. Press OK on the New dialog screen. A new image window displays. That’s good. Keep everything open on your work area(even though it may seem cluttered). You’ll be working with all these images in this chapter.

Using the Marquee Selection Tools

Once you’ve defined a new image window, let’s go back and work with our existing images. Let’s start with the World.jpg image. Click the World.jpg image so that it is the active image in Photoshop. Then, select the Elliptical Marquee tool from the toolbar. You’ll find the Marquee tools at the top left of the toolbar.

The Marquee Tool Options

Directly below the menu bar sits an options bar, as shown in Figure 5-2. The options available change depending on the tool that is selected from the toolbar.

Image from book
Figure 5-2: Exploring the Marquee tool options

The options available for the Marquee tools include:

  • Tool Presets

  • New Selection, Add to Selection, Subtract from Selection, and Intersect with Selection

  • Feather

  • Anti-alias

  • Style

  • Width

  • Height

Let’s take a look at these options, as they’re all useful in isolating areas of an image.

Tool Presets

The tool presets are a way of storing settings for a particular tool. The tool presets appears on the options bar with every tool, as shown in Figure 5-3. The tool presets are useful if you need the same set of options repeatedly. If this is the case, you can create a tool preset so you don’t have to set your options every time.

Image from book
Figure 5-3: Exploring the Tool Preset option

Access the Tool Preset option by double-clicking the drop-down arrow to the right of the active tool. If there are no tool presets defined, a message within the drop-down submenu states “No Tool Presets Defined for Current Tool.”

Caution

I prefer to avoid creating tool presets. Once you create a tool preset, the original options for that tool vanish from the options bar. If you do create tool presets, make sure you first create a tool preset without any options. This tool preset will then mimic the options bar’s original state.

Creating, Adding, Subtracting, and Intersecting Selections

With the Marquee tools, you have several options. You can create new selections, add to or subtract from already created selections, or create a selection from an area where two selections intersect.

Image from book
Figure 5-4: Exploring selection options

The following list summarizes the use of these options. You’ll get some hands-on experience with these options in a moment.

  • New Selection: This is the default option whenever you select and use a Marquee tool.

  • Add to Selection: This option allows you to add more selections to an existing selection. You can also hold the Shift key to add selections on the fly (without pressing the Add to Selection button from the options bar).

  • Subtract from Selection: This option is similar to Add to Selection; however, instead of adding to an existing selection, this option subtracts from existing selections. You can also hold the Alt key to subtract selections on the fly (without pressing the Subtract from Selection button from the options bar).

  • Intersect with Selection: This option allows you to create a selection based on the area where two selections intersect.

We’ll look at using these selection options in a moment.

Using the Feather Option

You may have seen the softened edges around images — where edges of an image gradually fade to transparent. In Photoshop, this is known as feathering.

You can add this effect by using the Feather option with your selections. When you select one of the Marquee tools, you’ll notice the Feather text box on the options bar. This text box sits next to the Intersect with Selection button, and is shown in Figure 5-5.

Image from book
Figure 5-5: The Feather option

For the examples in this chapter, we want to soften the edges of our selection. You can do this by entering a number in the Feather text box. A large number will create a wide range of transition from your image to transparency. A small number will create a small faded edge around your image.

Perform the following before moving on:

  1. Change the Feather text box value to 20 px.

The Anti-alias Option

Next to the Feather text box is the Anti-alias option. Anti-aliasing is Photoshop’s method of smoothing the jagged appearance of angled and curved lines. Photoshop does this by surrounding the pixels with intermediate shades of the line, as well as manipulating the size and horizontal alignment of pixels. Figure 5-6 displays the difference between normal and anti-aliased ellipses.

Image from book
Figure 5-6: Normal versus anti-aliased curves
Tip

Unless you’re going for the “pixelated-choppy” look, always keep the Anti-alias check box checked with your selections. This will ensure that any shapes you create or combine with other images will have the smoothest edges possible.

Perform the following before moving on:

  1. Check the Anti-alias check box, as shown in Figure 5-7.

    Image from book
    Figure 5-7: Checking the Anti-alias check box

The Style Option

Photoshop’s Style options allow you to constrain selections as they’re created. There are three Style options you can use with selections. It’s usually a good idea to keep the Normal style selected; however, there are other style options available that might serve your purposes at some later date.

  • Normal: There’s no constraint with your selection. In other words, you can draw a selection any size you want. Most of the time, you’ll want to keep your selection style set to Normal.

  • Fixed Aspect Ratio: This option allows you to define the ratio of the selection. For example, say you wanted to create a perfect circle selection. You could do one of two things:

    1. Hold the Alt key while the Style option is set to Normal. This allows you to create a selection with a 1 to 1 ratio (for example, you’ll create a perfect square or a perfect circle).

    2. Select the Fixed Aspect Ratio style option. You can then enter a numerical value in the Width and Height text fields beside the Style drop-down field. For example, entering a 1 in the Width text field and a 1 in the Height text field allows you to create a perfect square or a perfect circle.

  • Fixed Size: This option, similar to the Fixed Aspect Ratio option, allows you to define the size of the selection. Next to the Style drop-down field, there are Width and Height text fields. You can enter the width and height of the selection within these fields.

Perform the following before moving on:

  1. Set the Style option to Normal, as shown in Figure 5-8.

    Image from book
    Figure 5-8: Setting the Style option to Normal

Now that you’ve set some of your selection options, let’s put them to work.

Separating a Part of an Image

  1. Select the World.jpg image (if it’s not already selected). Then, create a selection around the continents with the Elliptical Marquee tool. Press the New Selection button on the options bar when you do this.

    Your image should look something like Figure 5-9.

    Image from book
    Figure 5-9: Creating a new selection

    Then perform the following to combine this image with the new, blank image you created earlier in this chapter.

  2. Arrange the Photoshop work area so you can see both World.jpg and the new, blank image.

  3. With the World.jpg image selected, go to the toolbox. Select the Move tool (found to the right of the Marquee tools). Then click and hold somewhere within the elliptical selection.

  4. Drag the elliptical selection onto the new, blank image, as shown in Figure 5-10.

    Image from book
    Figure 5-10: Dragging a selection onto another image

For now, place the world selection at the upper-right side of the new, blank image. Notice the faded edges. This occurred because you set the selection’s Feather option to 20 px.

Cropping an Image

Another useful Selection tool is Photoshop’s Crop tool. This tool allows you to remove unwanted parts of an image quickly and easily.

To get an idea of how the Crop tool works, follow these steps:

  1. Make Bing_Building.jpg from your work area active.

  2. Select the Crop tool (the third icon on the left side of the toolbox).

  3. Use your mouse to draw a box around the area you wish to crop, as shown in Figure 5-11.

    Image from book
    Figure 5-11: Defining an area to crop from an image

    Notice the small, clear boxes found at the corners and in the center of the sides of the crop selection. You can drag any of these crop handles to resize your crop area. The area within the crop selection will remain. Areas outside the crop selection represent areas Photoshop will remove.

  4. Press the Enter key to crop the image. You image should look similar to Figure 5-12.

    Image from book
    Figure 5-12: Cropping an image

Crop Tool Options

Like most tools available from Photoshop’s toolbox, the Crop tool contains options (available from the options bar). With the Crop tool, there are two sets of options: those available before cropping and those available after cropping.

Crop Tool Options (Available before Cropping)

Select the Crop tool again, but don’t use it to draw your cropped selection just yet. Take a look at the options bar. It should look like Figure 5-13.

Image from book
Figure 5-13: Viewing the Crop tool options (available before cropping)

The Crop tool options (available before cropping) include:

  • Width: The Width box allows you to define exactly the width measurement of the crop selection.

  • Height: The Height box allows you to define exactly the height measurement of the crop selection.

  • Resolution: The Resolution box allows you to define the resolution of the crop selection. Since you’re cropping images for the web, you don’t want to make the resolution more than 72 ppi (pixels per inch). However, if you’re cropping images for print or some other media and want a crisp graphic, you might want to bump up the resolution of the image here.

  • Front Image: This button fills the Width, Height, and Resolutions boxes with the width, height, and resolution of the currently selected image window. This is useful if you want to make a cropped image the same size as another particular image.

  • Clear: This button removes any values in the Width, Height, and Resolution boxes.

Although you may find these options useful, personally I don’t use them a whole lot. I find it easier just to create the crop selection and define its size manually with the crop handles. But it’s a preference thing. Feel free to use these options and see how they feel to you.

Crop Tool Options (Available after Cropping)

With the Crop tool selected, let’s tweak our Bing_Building.jpg graphic. Select the Crop tool and use it to draw around the building image. Take a look at the options bar. It should look like Figure 5-14.

Image from book
Figure 5-14: Viewing the Crop tool options (available after cropping)

The Crop tool options (available after cropping) include:

  • Shield: The “shield” is the gray area outside the crop region. Photoshop selects the Shield check box by default. When you check the Shield check box, Photoshop grays out the areas that it will crop away. Unchecking the Shield check box removes the grayed-out effect.

  • Color: This option allows you to define the color of the cropped-out area.

  • Opacity: The Opacity option allows you to define the darkness of the shield color. The lighter the opacity, the more transparent the shield color. A shield color of 100% is pure black.

  • Perspective: This check box allows you to orient the crop selection. Often the horizon (or perspective) becomes skewed — sometimes purposely by the photographer for dramatic effect. The Perspective check box allows you to rotate your crop selection to fix perspective problems.

Of all these options, the most useful is the Perspective check box. Let’s demonstrate its use with the Bing_Building.jpg file. Notice the perspective of the building appears from below the horizon line. You can correct this with the Perspective option. Try the following:

  1. Select the Bing_Building.jpg image. Select the Crop tool and create a crop selection around the building.

  2. Check the Perspective check box in the options bar.

  3. Click and hold the crop handles. Notice now that you can move the individual crop handles, thus changing a single edge of the crop selection. Work your way around the crop handles, changing the crop selection so the boundaries are parallel to the building’s sides, as shown in Figure 5-15.

    Image from book
    Figure 5-15: Changing the perspective of a crop selection

  4. Press the Enter key. Notice that Photoshop has now adjusted the perspective. The building sits straight now, rather than at an angle, as shown in Figure 5-16.

    Image from book
    Figure 5-16: Adjusting the perspective of an image

Let’s finish this activity by adding the building image to the image we started earlier in this chapter.

  1. Select the Bing_Building.jpg image.

  2. Select the Rectangular Marquee tool.

  3. Set the Feather option to 20 px.

  4. Draw a rectangle around your building and drag it onto the image you started earlier in the chapter that contains the elliptical selection from the World.jpg file. Your work area should look something like Figure 5-17.

    Image from book
    Figure 5-17: Combining multiple images

    Note

    Open the Layers palette (if it’s not already open). Notice that every time you drag a new layer onto the blank image, a new layer is created. There should be a Background layer, a Layer 1 (which contains the map image), and a Layer 2 (which contains the building image). You can rename any of these layers with a more descriptive title.

Creating Irregular Selections with the Lasso Tools

You’ve looked at the Marquee tools and the Crop tool to create selections. But what about creating irregular selections? Take a look at the Bing_Profile.jpg image. Say you wanted to separate Mr. Bing from the image’s background. That’s difficult (if not impossible) to do with the Marquee tools or the Crop tool.

You have a couple of choices for creating irregular selections. You can use the Lasso tools (which we’ll cover in this chapter) or you can use the Pen tool (which is discussed in Chapter 6).

Tip

The Pen tool is one of Photoshop’s most useful tools. You’ll learn about the Pen tool in Chapter 6.

Let’s take a look at the different Lasso tools (displayed in Figure 5-18) that can help you create unique selections.

Image from book
Figure 5-18: Exploring the Lasso tools

The Lasso tools consist of the following:

  • Lasso Tool: This tool allows you to draw selections freehand with your mouse.

  • Polygonal Lasso Tool: This tool allows you to make selections by drawing straight lines, resulting in a polygonal shape.

  • Magnetic Lasso Tool: The easiest of the Lasso tools to use, this tool is similar to the Polygonal Lasso tool. The Magnetic Lasso tool attaches itself to the image (as if the image were magnetic). You’ll use this tool to separate the picture of Mr. Bing from the Bing_Profile.jpg image.

Select the Bing_Profile.jpg image. Then perform the following:

  1. Select the Magnetic Lasso tool from the toolbox.

  2. Before starting, notice the options bar. It’s similar to the options bar found with the Marquee tools. Change the Feather option to 20 px.

  3. Click on the image — maybe somewhere around the right side of the image (around Mr. Bing’s left hand).

  4. Left-click often to improve the Magnetic Lasso’s accuracy. Clicking creates points, represented by small boxes.

  5. If you need to restart, press the Esc key to remove the selection and start again.

  6. It might take a little practice. Work with the Magnetic Lasso tool until your result looks something like Figure 5-19.

    Image from book
    Figure 5-19: Using the Magnetic Lasso tool

    Once you work your way around the image, it becomes a selection. If you’re having trouble creating a good selection with the Magnetic Lasso tool, you can fine-tune some of its options, which are shown in Figure 5-20.

    Image from book
    Figure 5-20: Exploring the Magnetic Lasso tool’s options

    • Width: This option defines the edge distances (from the Magnetic Lasso’s center point) from which the Magnetic Lasso will try to attach.

    • Edge Contrast: This option defines the sensitivity of the Magnetic Lasso. The more sensitive the Magnetic Lasso, the more easily it attaches to the edges of a shape.

    • Frequency: This option defines how often the Magnetic Lasso creates anchor points along the selection path. You can also create these anchor points by left-clicking. The more anchor points you use, the more accurate the Magnetic Lasso’s selection will be.

    • Pen Pressure: This button enables the use of a pressure-sensitive tablet device to change the Magnetic Lasso’s selection width (similar to the Width option).

  7. Once you’re happy with your selection, drag it onto the new combined image created in this chapter, as shown in Figure 5-21.

    Image from book
    Figure 5-21: Adding the Mr: Bing selection to your combined images

  8. Save this file as Bing_titlebar.psd. You’ll work on it some more in Chapter 7.

    Tip

    When you drag the Bing_Profile.jpg selection onto the new image, you may notice that it’s too large. You can shrink it down using Photoshop’s Transform feature. Press Ctrl+T. A Transform box surrounds the Mr. Bing selection. Hold the Shift key and grab one of the points on the Transform box. This allows you to resize the image while maintaining its dimensions.


Where to Go from Here

In the next chapter, you’ll learn to use Photoshop’s Pen tool as you create headers for your web pages. Web page headers are important: They have a huge impact on the look and feel of your website.


Chapter 6: Creating Web Headers

Overview

Perhaps one of the most important areas of any website is its header image. Each page of your website will probably contain this header image, so it will be one of the most viewed images on your site.

In this chapter, you’ll design a graphical header for the Jonathan Bing website while learning about Photoshop’s Pen tools.

Note

In Chapter 1, you learned that vector shapes use lines and curves rather than pixels. These lines and curves mean that vector graphics are resolution independent: No matter how much you increase or decrease the size of the vector image, its lines will remain sharp. Although you can’t save vector images for the web, you can create sharp, complex images with Photoshop’s vector tools, and then save them into .gif or .jpg format.

With that said, let’s jump into perhaps the best shape-drawing tool in Photoshop, the Pen tool.


Exploring the Pen Tool

Many people can’t stand Photoshop’s Pen tool when they’re first learning to use it. The Pen tool seems awkward and complex at first. You’ll scream and say “this thing’s impossible to use,” and wonder why there’s such a large section dedicated to this tool. But stick with it; you’ll get the hang of it. And then you’ll wonder how you ever got along without it. It’s like learning to ride a bike. Unfortunately, Photoshop doesn’t provide us with any training wheels. You’ve just got to jump in headfirst.

Note

Don’t worry if you can’t even draw stick people, or you don’t know the difference between van Gogh and Van Damme. You don’t have to be an artist to create incredible works of art with Photoshop. In fact, that’s part of the program’s popularity. You can express yourself creatively without having to worry about artistic technique. Photoshop’s tools (such as the Pen tool) take care of that for you.

Fire up Photoshop and create a new image. Make your image the following size:

  • Width: 775 pixels

  • Height: 420 pixels

  • Resolution: 72 pixels/inch

  • Color Mode: RGB Color 8 bit

  • Background Contents: Transparent

Now, select the Pen tool from the toolbox, as shown in Figure 6-1. Click on the arrow to open a list of Pen tools.

Image from book
Figure 6-1: Viewing the Pen tools from the toolbox

Select the Pen tool and hover it over the blank image window you created. You’ll notice the cursor turns into a pen tip.

Before we start creating some masterpieces, let’s take a look at the options available with the Pen tool, as displayed in Figure 6-2. These options are available from the options bar.

Image from book
Figure 6-2: Exploring options of the Pen tool
Tip

These options are also available with the Shape tools. These tools rest directly to the right of the Pen tools on the toolbox.

The following list summarizes these options:

  • Shapes: This option allows you to create shapes with the Pen tool. Shapes fill with whatever color you select in the Color Picker. You’ll create shapes with the Pen tool in this chapter to create a web header.

  • Paths: This option allows you to create paths with the Pen tool. Paths are similar to shapes, except they’re not filled with the currently selected color from the Color Picker.

  • Fill Pixels: This option (only available with the Vector Shape tool) fills your shape with the color currently selected in the Foreground color box.

  • Pen Tool: There are a couple choices of Pen tools you can use. This first Pen tool option represents the Standard Pen tool. You’ll probably find yourself using the Standard Pen tool the most.

  • Freeform Pen Tool: This option allows you to draw freehand. You can also choose to make the Pen tool magnetic, which works similar to the Magnetic Lasso tool (explored in Chapter 5).

  • Shapes: The Shapes options allow you to pick common shapes: rectangles, rounded rectangles, ellipses, polygons, lines, and custom shapes.

  • Shape Options: Some of the shapes have options (for example, with the line shape you can add arrowheads). Select a shape, and then choose the Shape Options drop-down arrow.

  • Option Selector: This option changes depending on the shape tool you’ve chosen. For example, if you select the Polygon shape, the Option Selector allows you to define the number of sides the shape has.

  • Shape Area Options: These options are similar to the selection options you explored in the last chapter. These options allow you to create strange and irregular shapes. They include Create New Shapes, Add to Shape Area, Subtract from Shape Area, Intersect from Shape Area, and Exclude Overlapping Shape Area.

  • Set/Change Properties: This option allows you to lock or unlock the layer of your shape. Locking this layer ensures that you cannot make changes to any of its properties (such as adding a bevel and emboss effect).

  • Layer Style: This option allows you to add a style to your shape (like you did in Chapter 4).

  • Color: This option brings up the Color Picker dialog box, which allows you to change the color of your shape.

Now that you’re familiar with the options of the Pen tool, let’s try drawing with it to create a web header.

Creating Curved Lines with the Pen Tool

Select the Pen tool. In the options bar, make sure you’ve selected the Paths option.

Tip

I think it’s easier to start with paths when using the Pen tool, even if you’re using it to create shapes. When using the Pen tool with the Shapes layer selected, you’ll find that Photoshop begins to color in your image. Sometimes, this is distracting (especially if it seems Photoshop is filling in the color on the wrong side of your drawing lines).
Start with paths. You can make them shapes and fill them in later, as you’ll do in this chapter.

You’re now ready to begin. Perform the following:

  1. Access the 775x420 blank image window you just created. This is the size of the web page you’ll design. Set your background to Transparent.

    Tip

    We’re designing a header for an 800x600 web page, which is the most frequent screen size we Figure visitors to the site will use. If you design for a larger page (say, 1024x768), your 800x600 visitors will find themselves scrolling horizontally to view your web page.
    The 775x420 size leaves room for the web browser (such as Microsoft Explorer).

  2. Select the Pen tool. Click on an area outside the image, as shown in Figure 6-3.

    Image from book
    Figure 6-3: Creating a point with the Pen tool

  3. Click and hold another point somewhere within the image. Then, drag your mouse up and to the right. Notice that the line begins to bend. The second point you created becomes an anchor point.

    A line forms that extends from the anchor point. This is a direction line that helps you define the curvature of the line. Release the mouse button when you’re pleased with the shape of your line. Figure 6-4 displays some of these elements.

    Image from book
    Figure 6-4: Creating a curve with the Pen tool

    Note

    Learning how to maneuver this direction line is tricky at first. Don’t give up, though. Keep at it. Eventually, it’ll just click and you’ll find yourself using it to create all kinds of irregular shapes without even thinking about it.

  4. Hold the Alt key on you keyboard and click the filled-in anchor point (which is a dark colored square). This is where your line will continue. Click and release another point to make the next curve, as shown in Figure 6-5.

    Image from book
    Figure 6-5: Continuing a path with the Pen tool

It’s cool to use curved shapes in web pages. You’ll see many web pages with a straight-edged, square look. Straight columns. Straight tables. Using some curves helps the images on your web page pop!

However, this isn’t to say everything on your web page should be organic. Let’s look at creating some straight lines with the Pen tool as well.

Creating Straight Lines with the Pen Tool

An easy way to create straight lines with the Pen tool is to hold the Shift key as you click your points. Continuing from the last anchor point, perform the following:

  1. Hold down the Shift key. Then click anywhere to the right of the last anchor point, even somewhere off the image window.

    Notice that Photoshop creates a straight line between the two points, as shown in Figure 6-6.

    Image from book
    Figure 6-6: Creating straight lines with the Pen tool

  2. Continue working your way around the image window. Don’t worry about the shapes outside the image window. They won’t display.

Work your way around the image window until you’re back where you started. Click the anchor point you started with. The anchor points disappear, and you’re left with a path, as shown in Figure 6-7.

Image from book
Figure 6-7: Closing your path

Congratulations! You’ve created your first Photoshop path. Don’t worry if it’s not perfect. Drawing paths is about getting a rough version onto your screen. From there, you can then tweak and fine-tune using the Path Selection tools.


Editing with the Path Selection Tools

Photoshop’s Path Selection tools reside directly above the Pen tools on the toolbox, as shown in Figure 6-8. The Path Selection tools allow you to edit your paths. Not happy with the way your path turned out? No problem. The Path Selection tools allow you to change, push, and pull the different areas of your path as needed.

Image from book
Figure 6-8: Exploring the Path Selection tools

The Path Selection tools consist of the following:

  • Path Selection Tool: When you click a closed path with this tool, the entire path becomes selected. You can see where all the anchor points exist within the path. This tool allows you to move the entire path at once.

  • Direct Selection Tool: This tool allows you to grab an individual anchor point, and then move it, expand it, or reduce it with the direction lines. In short, this tool allows you to alter the shape of your path.

Let’s take a look at both of these tools in action.

Moving Closed Paths with the Path Selection Tool

To move an entire path, perform the following:

  1. Select the Path Selection tool from the toolbox.

  2. Click on the closed path you just created. You’ll notice the anchor points display.

  3. You can use the Path Selection tool in a couple of different ways once you’ve clicked on the closed path:

    • Move the closed path pixel by pixel using the arrow keys on your keyboard. You can hold down the Shift key while using the arrow keys to move the path 10 pixels at a time.

    • Click and drag the closed path with the Path Selection tool cursor.

  4. Using either one of those methods above, drag the closed path down and to the left on your image window, as shown in Figure 6-9.

    Image from book
    Figure 6-9: Moving a path with the Path Selection tool

The Path Selection tool allows you to move your entire path at once. But what if we want to alter the look of our path? Say you want to increase the curve of an area or straighten a part of your path. For that, you’ll want to use the Direct Selection tool.

Fine-Tuning a Closed Path with the Direct Selection Tool

The Direct Selection tool allows you to move and work with anchor points within a path (rather than just moving the whole path at once, like the Path Selection tool does). Let’s try an example and see the Direct Selection tool in action:

  1. Select the Direct Selection tool from the toolbox.

  2. Click on the closed path you just created. Notice the anchor points display; however, they’re all unselected. The anchor points are clear boxes instead of filled in, as shown in Figure 6-10.

    Image from book
    Figure 6-10: Working with the Direct Selection tool

  3. With the Direct Selection tool, click on the anchor point in the center of the bottom portion of the path.

  4. Click and hold this anchor point. Notice the anchor point becomes dark, meaning it’s selected. Drag this anchor point to the right. Notice that the curvature of the path changes, as shown in Figure 6-11.

    Image from book
    Figure 6-11: Dragging an anchor point

    You can also change the curvature on anchor points where there are direction lines. Notice there’s a direction line currently attached to the second anchor point in your closed path.

  5. With the Direct Selection tool selected, click and hold the direction line, then drag it to the left. This increases the curve to the right of your path, as shown in Figure 6-12.

    Image from book
    Figure 6-12: Dragging a direction line with the Direct Selection tool

The Direct Selection tool’s great for tweaking existing anchor points. But what if you want to add or remove anchor points from a closed path? What if you want to add direction lines to an anchor point? The answer to these questions lies with the Pen tool.

Not only does the Pen tool provide a means for drawing paths, it also contains several editing options. Let’s take a look at some of the path-editing options of the Pen tool.


Editing with the Point Tools

You’ve already explored the Pen tool a little in this chapter. The Pen tool and the Freehand Pen tool contain similar functionality in that they both allow you to draw paths. The difference with these two tools is preference. The Pen tool provides you with some help in drawing (I personally need all the help I can get). The Freehand Pen tool provides no help in drawing; it’s almost as if you’re drawing directly onto your computer screen with pen in hand.

Grouped with these two Pen tools, however, are three other tools designed specifically for editing paths: the Point tools. These tools are as follows:

  • Add Anchor Point Tool: This tool allows you to add more anchor points to a path. All you do is click this tool, and then click on an area of a closed path where you would like another anchor point.

    Tip

    To make the smoothest paths, you’ll want to use as few anchor points as possible. However, the more complex the path you’re creating, the more anchor points you’ll need to use. Aim to use the fewest number of anchor points possible for best results.

  • Delete Anchor Point Tool: This tool allows you to remove anchor points from a path. Perhaps you have too many anchor points and want to smooth out your path. Click this tool, and then click on an anchor point within a closed path. This allows you to remove the anchor point.

  • Convert Point Tool: This tool allows you to change an anchor point from a curve to a straight line, or a straight line to a curve. Let’s take a look at editing your path with this tool.

Fine-Tuning Paths with the Convert Point Tool

If you haven’t done so already, select the Convert Point tool from the toolbox. This tool resides with the Pen tools. Your cursor should look like an upside-down V. Then, perform the following:

  1. Click on the third anchor point (on the bottom line) within the closed path. Notice this anchor point becomes dark. Originally, you created this anchor point as a straight line (recall you used the Shift key to draw a straight line from the previous anchor point to this anchor point).

    However, now that you’ve clicked it with the Convert Point tool, you can create curves at this anchor point.

  2. Click and hold your mouse, then drag up and to the right, as shown in Figure 6-13. Notice you’re now able to change the curvature of your closed path.3. Once you’ve made these changes, click outside the path. The anchor points disappear. We’re now ready to make our path a selection, and then eventually fill it with color and complete the web header.

    Image from book
    Figure 6-13: Changing the curvature of a path with the Convert Point tool


Changing Paths to Selections

Right-click on the path with one of the Pen tools or Path Selection tools. A submenu displays. Select Make Selection from this menu. You’ll notice the path now displays the marching ants effect (or a moving dotted line).

Filling a Selection with Color

  1. In the toolbox, double-click the Foreground Color option. The Color Picker dialog box displays. Enter the following in the RGB text fields and then press the OK button:

    • R: 13

    • G: 31

    • B: 124

  2. Now select the Paint Bucket tool and click within your selection. The selection fills with your blue color, as shown in Figure 6-14.

    Image from book
    Figure 6-14: Filling your web header path with color

Adding Patterns to Your Selection

Recall that when you created the logo in Chapter 3 you used Photoshop’s blending options to add a more graphical look and feel to your image. Let’s do the same with our selection. Perform the following:

  1. Right-click on the web header layer and select Blending Options in the submenu that appears.

  2. Check the Drop Shadow, Bevel and Emboss, and Pattern Overlay check boxes.

  3. Left-click once on the Pattern Overlay check box. The right side of the Layer Style dialog box displays Pattern Overlay settings.

  4. Click the right-facing arrow next to the Pattern drop-down field. A submenu displays, filled with thumbnails of preset layer patterns.

  5. Select the right-facing arrow in this submenu. Another submenu displays to the right, which contains more preset patterns.

  6. Select the Rock Patterns preset pattern from the submenu.

  7. A message box displays, asking if you wish to replace the current patterns. Press OK.

  8. Select the Light Marble pattern from the thumbnail submenu. (Hover your mouse over the thumbnail image to view the names of the patterns.)

  9. Press OK in the Layer Style dialog box.

  10. Press Ctrl+D to deselect your selection. Your web header should look like Figure 6-15.

    Image from book
    Figure 6-15: Spicing up the Jonathan Bing web header

  11. Save this file as Bing_webheader.psd.


Where to Go from Here

In the next chapter, you’ll pull all the elements you’ve been working on into a web page. You’ll also learn some tips and tricks to apply to web buttons, headers, and logos.


Chapter 7: Pulling a Web Page Together

Overview

So far, you’ve familiarized yourself with various elements of web design. You’ve also learned key areas of Photoshop as you prepared images and shapes for your web pages. Up to this point, you’ve been working on individual pieces for Mr. Jonathan Bing’s website. In this chapter, we pull it all together.

Unfortunately, pulling all the pieces of a web page together in Photoshop is not the final step. Surely you’ll want to add text to your web page — text that you can change quickly. You may even want to add some cool effects such as buttons that change when you roll your mouse over them (better known as rollover effects).

Part III of this book will address these more advanced areas of web design. For now, let’s concentrate on placing your images.


Defining the Web Page

Let’s access some of the images you’ve created up to this point in the book. We’ll use them to piece together the home page of Jonathan Bing’s website.

  1. Fire up Photoshop. Then, open the following images you’ve created so far:

    • Bing_logo.psd

    • Bing_titlebar.psd

    • Bing_webheader.psd

      Note

      You can find these files in the Chapter 7 folder of the downloadable files, available at www.wordware.com/files/webdesign.

      Image from book
      Figure 7-1: Using some of your images for the Bing website

  2. In Photoshop, go to File4New. Create a new image that is sized for your web page. Let’s size for an 800x600 screen dimension. Thus, define your new image as follows, shown in Figure 7-2:

    • Width: 775 pixels

    • Height: 420 pixels

    • Resolution: 72 pixels/inch

    • Color Mode: RGB Color 8 bit

    • Background Contents: Transparent

      Image from book
      Figure 7-2: Defining a web page for 800x600 screen resolution

  3. Click the OK button. This is the image onto which you’ll drag all other images, as shown in Figure 7-3.

    Image from book
    Figure 7-3: Defining the Bing home page

Adding a Watermark to your Images

Surf the web and you’ll probably find several sites that use water- marks. This is especially true for sites dedicated to white-collar type businesses such as the one that belongs to our attorney Mr. Bing.

Watermarks are translucent designs. You’ve probably seen them mostly on fancy letterhead. We can reproduce watermark effects within Photoshop to give your website an air of professionalism.

  1. Click on the Bing_webheader.psd image. Then, create a new layer within this image. Call this new layer watermark.

  2. A great way to make watermarks in Photoshop is through the Wingdings font. If it’s not open already, access the Character palette by selecting Window ▶Character.

  3. In the Character palette, define the following settings:

    • Font Family: Wingdings 2

    • Font Size: 72 pt

    • Color: RGB = 13, 31, 1244.

      Image from book
      Figure 7-4: Defining the character for your watermark

  4. Select the Text tool. Click the watermark layer and then type the characters ab in lowercase. You should see two curly leaf characters display, as shown in Figure 7-5.

    Image from book
    Figure 7-5: Creating a watermark

  5. With the watermark layer still selected, change the Blending Mode drop-down field from Normal to Overlay, as shown in Figure 7-6.

    Image from book
    Figure 7-6: Changing the layer’s blending mode from Normal to Overlay

    Notice the watermark now appears transparent.

  6. With the watermark layer still selected, press Ctrl+T to transform your image. Hold down the Shift key and stretch your watermark so it fills most of the page.

  7. Rotate your watermark by placing your cursor near one of the corners of the Transform box that surrounds your image. Your cursor turns into a curved arrow. Click and drag your mouse to the right or left to rotate your image, as shown in Figure 7-7. Press Enter to complete the transformation.

    Image from book
    Figure 7-7: Transforming and rotating your watermark

  8. To remove the areas of watermark that are not overlaid, you’ll first need to rasterize your text. Right-click in the watermark layer. Then select Rasterize Layer.

  9. Select the web header layer. Then, select the Magic Wand tool.

  10. In the options bar, change the Tolerance to 100. Tolerance defines the areas Photoshop will select depending on the difference shades of color. A low tolerance means Photoshop is picky. A high tolerance (like 100) means Photoshop is not picky in its selections.

  11. Select the web header layer. Click somewhere within the web header area of your image, as shown in Figure 7-8.

    Image from book
    Figure 7-8: Selecting an area within your layer

  12. Click on the watermark layer. Then, select Select ▶Inverse from the menu bar, as shown in Figure 7-9.

    Image from book
    Figure 7-9: Selecting the inverse of a selection

    Caution

    In Photoshop CS2, users can no longer select an image within a layer by holding down the Control key and clicking. You’ll now need to use the Magic Wand tool to perform this action. If you’re familiar with older versions of Photoshop, this new method may seem a little foreign. Don’t worry, though. You’ll get used to it.

  13. Once you’ve selected Inverse, hit the Delete key on your keyboard. Notice the unwanted portion of your watermark is now gone, as shown in Figure 7-10.

    Image from book
    Figure 7-10: Finishing up your watermarked web header

  14. Save your web header. Then, combine all layers together by pressing Shift+Ctrl+E (or selecting Layer ▶Merge Visible from the menu bar).

Adding Duotone Tinting to Images

Duotone tinting is where images use only two colors, such as two shades of blue. The images in our Bing_titlebar.psd file are perfect candidates for a duotone effect. Perform the following steps to add duotone to this image:

  1. Select the Bing_titlebar.psd image. Merge all visible layers together by pressing Shift+Ctrl+E.

  2. Create a new layer in this image. You can call this new layer duotone.

  3. Double-click on the Foreground color. The Color Picker dialog box displays.

  4. Enter an RGB color of 13, 31, 124, then press OK.

  5. Select the Paint Bucket tool. Select the duotone layer, then click within your image. The entire image should fill with your blue color, as shown in Figure 7-11.

    Image from book
    Figure 7-11: Defining your duotone layer

  6. In the duotone layer, change the Blending Mode drop-down field from Normal to Color, as shown in Figure 7-12.

    Image from book
    Figure 7-12: Changing the blending mode for your duotone tinting

  7. Notice your image now has a blue duotone tint to it, displayed in Figure 7-13. However, it looks a little dark. Let’s lighten it up a bit.

    Image from book
    Figure 7-13: Adding duotone tinting to your image

  8. You can lessen the duotone effect by clicking on your first layer (not the duotone layer), and then selecting Image ▶Adjustments ▶Desaturate. This removes color from your image, resulting in a lightened effect, as shown in Figure 7-14.

    Image from book
    Figure 7-14: Lessening duotone tinting through desaturation

  9. We don’t need this entire image, though. First, merge all visible areas of this image by pressing Shift+Ctrl+E.

  10. Select the Elliptical Marquee tool. In the options bar, change Feather to 50 px. Then, draw an elliptical selection around your image, as shown in Figure 7-15.

    Image from book
    Figure 7-15: Creating a selection around your duotone image

  11. From the menu bar, choose Select ▶Inverse. Then hit the Delete key. Your screen should look like Figure 7-16.

    Image from book
    Figure 7-16: Deleting unwanted areas from your image

  12. Save your changes. We’re now ready to pull all our images onto a single web page.


Pulling Your Images Together onto One Web Page

Now that we’ve tweaked a couple of your web page images, let’s combine them by performing the following:

  1. Select the Bing_logo.psd image. Combine all layers together by pressing Shift+Ctrl+E (or selecting Layer ▶Merge Visible from the menu bar).

  2. Drag the merged Bing_webheader.psd and the Bing_logo.psd images onto the new, blank image you created earlier in this chapter, as shown in Figure 7-17.

    Image from book
    Figure 7-17: Combining the web header and logo

  3. Select the Bing_titlebar.psd image. Then, choose Image ▶Image Size. The Image Size dialog box displays.

  4. Change the width to 75 percent, as shown in Figure 7-18. Then press OK. The title bar image is resized to three quarters of its original size.

    Image from book
    Figure 7-18: Resizing the title bar image

  5. Select the Move tool from the toolbox. Then drag the title bar duotone image onto your new web page image.

  6. The duotone image currently sits above the web header. Let’s move the duotone image layer so it’s below the web header. In the Layers palette, drag the duotone image below the web header image, as shown in Figure 7-19.

    Image from book
    Figure 7-19: Dragging the title bar image below the web header


Slicing Your Web Images

Great web images can really aid in the overall appearance and design of websites. Unfortunately, web images are also one of the most common flaws of a website as well. Even if a web image looks great, if it’s too large it can cause a web page to load slowly.

Sometimes, large web images will even cause your computer to time out, which means your computer has given up loading a web image and instead leaves a blank spot where the image should be.

The best way to prevent this problem is to use smaller images (which in turn, have smaller file sizes).

One of the nice features added to Photoshop in recent years is the Slice tool (located on the right of the toolbox, third from the top).

Note

In older versions, the Slice tool is only available in ImageReady, a companion program that is loaded with Photoshop. However, with version CS2, you can find many of ImageReady’s best tools available directly in Photoshop. The Slice tool is one such tool.

The Slice tool allows you to “slice” an image into smaller parts, resulting in faster loads when viewed through a web browser.

This isn’t to say you want to slice your images into a million pieces. Rather, look at your image and slice it into two, three, or four key parts (try not to slice your images into more than four slices if possible).

Planning for Slicing Layout

Slices determine how your images display within your web pages. After you make your slices, you save them for the web (you’ll do all these steps in a moment). Your slices are then put into HTML(Hypertext Markup Language) format, which is the format of web pages.

Photoshop organizes your slices into tables with a border and line size of 0. A border and line size of 0 will hide any evidence of tables to visitors. All they see is the image, pieced together seamlessly.

When slicing images for the web, it’s important to determine how you want your images to display within a web page. A good idea is to break your slices into key areas:

  • Header

  • Contents

  • Footer

Now that you have a little background information about how slices work, let’s see them in action.

Using Photoshop’s Slice Tool

  1. Select the Slice tool from the toolbox. Notice how a border surrounds the image and a gray box displays in the top-left corner. This gray box displays the number 01 with an icon beside it, as shown in Figure 7-20.

    Image from book
    Figure 7-20: Selecting an image with the Slice tool

    This number (and the icon beside it) represents an auto-slice, which Photoshop automatically generates. Think of your slices as tables. Right now, your table only consists of one column and one row. This is because right now you only have one slice.

    Let’s continue to slice up our image and see what happens.

  2. Use the Slice tool to draw around the right side of your title bar, but don’t go to the bottom of your image. Make the bottom of your slice toward the bottom of the Bing_webheader.psd image, as shown in Figure 7-21.

    Image from book
    Figure 7-21: Slicing an image further with the Slice tool

    Photoshop will create a few boxes around the rest of the image. These are called Non-User slices and use gray tags. The slices you create are called User-Slices and use blue tags.

  3. Let’s create one more slice. With the Slice tool, draw a slice below the bottom of the navigation bar, as shown in Figure 7-22. This is an additional area you can use if you want to put content such as a footer on your web page.

    Image from book
    Figure 7-22: Adding another slice as a place for more content

Saving for the World Wide Web

After you’ve sliced your image, it’s time to convert it into a web page.

  1. Go to the menu bar and select File ▶Save for Web. The Save For Web dialog box displays, as shown in Figure 7-23.

    Image from book
    Figure 7-23: Saving your Photoshop image for the World Wide Web

    Photoshop’s Save For Web dialog box provides a ton of useful options for web designers, such as displaying the final file sizes for your web page and providing compression options and approximate loading times for your web page.

Which Graphic Format Is Best for Web Pages?

There are four file formats from which you can choose to save the images for your web pages — JPEG, GIF, PNG 24, and PNG 8. So, which graphic format is best for your web pages? This is a topic that many web developers debate. Let’s take a look at the options.

  • JPEG: The most commonly used and most widely supported image format around. So does that mean it’s the best to use? Not necessarily.

    The JPEG format supports 24-bit color, which means it can have up to 16 million colors. Thus, JPEG preserves a lot of variations in color. Unfortunately, JPEG has a crummy compression technique, which means that whenever you save to JPEG, some image detail gets chewed up.

  • GIF: A format developed specifically for the web. It’s an 8-bit color format, which means it can save up to 256 different colors. It supports lossless compression up to 256 colors, background transparency, and even animations.

  • PNG: This format is a newer version of GIF. There are two types of PNG compression: PNG-8 and PNG-24. PNG-8 is similar to the GIF format. It supports 256 colors, but is usually slightly smaller in file size than images saved in the GIF format. PNG-24 is similar to JPEG. PNG-24 allows for 24-bit compression, meaning it supports 16 million colors. Images saved in the PNG-24 format are slightly smaller than images saved in the JPEG format.

Now that you have an idea of the basic image formats you can use, which one is best? I would suggest saving your web images as JPEG. I find it provides the best quality and file size for the World Wide Web.

  1. In the Save For Web dialog box, perform the following:

    • Change the file format (the first drop-down field on the right side of the screen) to JPEG.

      You can experiment with these settings as you work with your web images. I’ve found that these settings provide smooth gradients while keeping your file sizes small.

  2. Press the Save button. A Save Optimized As dialog box displays, as shown in Figure 7-24.

    Image from book
    Figure 7-24: Using the Save Optimized As dialog box

  3. Name your file bing_home.html, and change the Save as type text box to HTML and Images. Then, navigate to where you wish to save this file.

Congratulations — you’ve just created your first web page. If you go to the place where you saved this file and open it, you’ll see it open in your default web browser, as displayed in Figure 7-25. Although your graphics are sliced up, you can’t tell in a web browser.

Image from book
Figure 7-25: Viewing your web page in a web browser


Where to Go from Here

Although your page may look great, there’s no way to navigate through it. There’s no content. There are no rollover effects. Worry not. In Part III, you’ll learn to use Macromedia Dreamweaver to add text and functionality to your web pages. However, first, let’s take a look at the next chapter, where you’ll create some backgrounds for your web pages.


Chapter 8: Creating Web Backgrounds

Overview

In real life, most people “tune out” what’s in the background, but a background plays a huge part (even if it’s just on a subconscious level) of the impressions you get from something.

Your favorite TV shows use certain backgrounds to help suggest a mood. For example, what mood would you get from The Sopranos if every scene took place in neon pink and green painted rooms? Chances are you wouldn’t think the show was about the mob.

Web page backgrounds are no different. The background of a web page has a huge impact on the look and feel of your site.

When web page backgrounds were first used, people went crazy. You’d find web pages with loud, colorful, busy designs that made it almost impossible to read the text on the page, as shown in Figure 8-1.

Image from book
Figure 8-1: Using busy backgrounds for web pages is a no-no

In this chapter, you’ll learn to create web backgrounds that won’t have your viewers screaming.


Types of Web Backgrounds

In web design, there are essentially two types of web page backgrounds:

  • Colors: You can create colored backgrounds easily using HTML or a web editing program, such as Macromedia Dreamweaver.

  • Graphics: Small images that seamlessly tile together to create a single, large background. The reason these images are small is because a large background image would make your web pages agonizingly slow to load.

In this chapter, we’ll focus on creating these small images that will tile together into a background. Confused a little on how this all works? Then read on…


How Backgrounds Work

Web page backgrounds are small images, as shown in Figure 8-2. These images blend (known as tiling) to create one large background image. You set background images up within a web editor program (which you’ll explore in Chapter 11).

Image from book
Figure 8-2: Small images that make up a web page background

Sizes for Background Images

So why not just create a huge, single image for a background that’s tall and wide enough to cover the background of any screen size? This would eliminate the need to hide the tiling effect of backgrounds.

The answer is this:

Bigger graphics = larger file sizes = slower web pages

Large graphics will make your web pages take longer to open. A graphic that is 2 kilobytes in size takes roughly 1 second to down- load (on a 28.8 Kbps modem connection). Therefore, a graphic that’s 50 kilobytes might take around 30 seconds to download.

In web design, anything that takes more than 30 seconds to load is too large for your web page.

Caution

You also don’t want background images that are too small. Theoretically, you could create a background image the size of a single pixel. Sure, the file size of a 1-pixel graphic is small. But the problem is when web browsers tile (repeat) small graphics across and down the background of a web page, the tiling requires processing power from your computer. A smaller background image means it takes more time for your computer to tile this image.


Creating a Repeating Gradient

Let’s start by creating a repeating gradient background that displays dark green at the top, and then blends into a lighter shade of green. This background will be for a new client website: the San Simeon Software Group. They saw the work you did for Jonathan Bing and want you to create a website for them.

Note

In Chapter 11, you’ll piece the San Simeon website together.

  1. Fire up Photoshop. Select File ▶New from the menu bar. The New dialog box displays. Enter the following settings:

    • Width: 122 pixels

    • Height: 122 pixels

    • Resolution: 72 pixels/inch

    • Color Mode: RGB 8 bit

    • Background Contents: White

  2. Press OK. A blank, new image window displays.

  3. To create a gradient, double-click the foreground color on the toolbox. The Color Picker dialog box displays.

  4. Define the RGB as 82, 121, 81. Then press OK.

  5. Double-click the background color on the toolbox. The Color Picker dialog box displays.

  6. Define the RGB as 145, 169, 144. Press OK.

  7. Select the Gradient tool from the toolbox. This tool is located with the Paint Bucket tool. Select the small arrow at the bottom-right corner of the Paint Bucket tool icon to choose the Gradient tool, as shown in Figure 8-3.

    Image from book
    Figure 8-3: Selecting the Gradient tool

  8. Click the gradient drop-down field located in the options bar. The Gradient Editor dialog box displays.

  9. Select the first gradient preset (it is the square that contains the green color you defined for the forground and background).

  10. Click and drag your mouse within the blank image window. Click somewhere in the middle of the image window, and release the mouse before you reach the bottom of the image window, as shown in Figure 8-4.

    Image from book
    Figure 8-4: Defining a gradient with the Gradient tool

    Tip

    Drawing a small gradient line creates a gradient that changes drastically from top to bottom. If you wanted a more subtle gradient, you would need to draw a longer gradient line.

    When you release your mouse, the image area fills with a green gradient, as displayed in Figure 8-5.

    Image from book
    Figure 8-5: Viewing the gradient background image

  11. Select File ▶Save As from the menu bar. Save your image as grn-grad.png.

    You’re not done with this background image yet. If you were to pull it into a web page right now, it would repeat over and over, as displayed in Figure 8-6. This is known as tiling — which you definitely don’t want.

    Image from book
    Figure 8-6: Viewing a tiled web page background

Don’t worry, though. We can fix this tiling problem by using a sliver.

Creating a Sliver

Nothing screams “amateur” more than visible tiles in backgrounds.

The way to solve background-tiling problems is through the use of a sliver, which is a 1-pixel high (or wide) image that can tile over and over. Slivers can tile because they blend into each other. Slivers are made by creating a 1-pixel high area on the right side and/or bottom of your image.

Not quite sure what I’m talking about? Let’s make a sliver to get a better understanding. Perform the following:

  1. With your grn-grad.png file open, press Ctrl++ to zoom into your image. Do this until your image is magnified 600%. It’s easier to slice a 1-pixel area of an image when your image is zoomed.

  2. Select the Crop tool.

  3. At the bottom of your image, click and drag a 1-pixel high area, as displayed in Figure 8-7.

    Image from book
    Figure 8-7: Creating a 1-pixel high sliver

  4. Press Enter. You’ve now created a sliver. Save your sliver as grn-grad-sliver.png.

You’ll use this sliver and background in Chapter 11, when you piece together the San Simeon Software website.


Where to Go from Here

Web backgrounds provide a nice alternative to stark white or solid-colored backgrounds. Colored gradients like you’ve created in this chapter will add a neat element of professionalism to your websites, as long as they don’t tile. You can prevent this when you begin working with your web pages in a web editor.

This brings us to Part III, where you’ll begin exploring Macromedia Dreamweaver for adding content to your websites and you’ll learn to make your graphical creations into actual working web pages.


Part III: Publishing to the World Wide Web

Chapter List

Chapter 9: Working with Dreamweaver
Chapter 10: Creating a “Professional” Web Page Style
Chapter 11: Creating a “Modern” Web Page Style
Chapter 12: Going Live with Your Website


Chapter 9: Working with Dreamweaver

Overview

Up to this point, you’ve learned to create various web graphics in Photoshop. Unfortunately, while Photoshop lets you save images as web pages (as you learned in Chapters 7 and 8), that’s all you can do. There’s no way to enter text (content) on your web page when working with Photoshop unless you make that text part of your image (by using the Text tool).

There are a couple reasons why you would want to use a web editing program (such as Dreamweaver) to add content to your web page rather than Photoshop:

  • Search engines (such as Google and Yahoo) use the text on your web pages when visitors perform searches. The text has to be part of the HTML code, however. Google and Yahoo have no way to read text that’s an image (that is, text created in Photoshop).

  • Visitors enjoy web pages that change. That means revising your content often. Updating content is easier from a web editing program than having to go into Photoshop and retype text using the Text tool.

In this chapter, you’ll explore Macromedia Dreamweaver. Dreamweaver is a professional HTML (web page) editor that allows users to design and code anything you can think of for the World Wide Web, including websites, web pages, web applications, and more. Dreamweaver is one of the web editing programs of choice for professional web designers.

In this chapter, you’ll learn the basics of Dreamweaver. This chapter will get you up and running with the program, and you’ll specifically learn how to work further with the web images you’ve created in Photoshop.


Finding a Copy of Dreamweaver

If you don’t have a copy of Macromedia Dreamweaver, go to http://www.macromedia.com/downloads/. There you can buy or download a free trial of the latest Dreamweaver product. The trial version is good for 30 days.

Once you’ve installed your copy of Dreamweaver, fire it up. Open the bing_home.html page you created in Chapter 7.


The Dreamweaver Environment

Macromedia Dreamweaver is a powerful website development tool. Despite all its powerful features, it’s also surprisingly user-friendly. (After struggling to learn Photoshop, you’ll probably find Dreamweaver a nice change of pace.)

Dreamweaver contains an intuitive interface for creating professional-looking websites quickly. The program also features several programming tools that allow you to design data-driven web-based applications.

  1. The first time you fire up Dreamweaver, it’ll ask you if you wish to use a Design or Code layout. For our purposes, select the Design layout.

    The Design layout allows users to work in a WYSIWYG environment.

    Note

    A WYSIWYG (pronounced WIZ-zee-wig) application allows users to see on their monitor exactly what their document will look like when viewed in its final form. In Dreamweaver, what you type on the Design layout is a WYSIWYG display of the web page.
    Tip

    If you accidentally select the Code layout, don’t worry. You can decide which layout you wish to use once you are in Dreamweaver. Once you start a new page or open an existing HTML page (which you’ll learn to do in a moment), go to Window ▶Workspace Layout in the menu bar. A submenu displays. Here, you can select the Design layout.
    You can also select the Dual Screen item from this submenu. This allows you to view both the Designer and Code layouts at the same time.

    After selecting the Design layout, a menu screen displays, as shown in Figure 9-1.

    Image from book
    Figure 9-1: Viewing the Dreamweaver main menu

  2. Select the Open folder (from the Open a Recent Item column). An Open dialog box displays.

  3. Select the bing_home.html file you created in Chapter 7.

  4. Press the Open button. The bing_home.html file opens within your Dreamweaver environment.

    Note

    You can access the bing_home.html file from the Chapter 9 folder of the downloadable files available at www.wordware.com/files/.

Exploring the Dreamweaver Environment

The Dreamweaver Design layout screen (displayed in Figure 9-2) is fairly standard looking. Common commands are accessible from a menu bar at the top of the screen. In the middle of your screen is the Design window, where you can add text, images, tables, and other elements.

Image from book
Figure 9-2: Looking at the Dreamweaver environment

There are a couple areas that you may not be familiar with, such as the Properties inspector and the panel groups. Let’s take a look at these and other areas of the Dreamweaver environment.

Tip

If you don’t see some of these toolbars, select View ▶Toolbars from the menu bar. A submenu displays. Select the toolbar you wish to view from the submenu. This item should have a check mark next to it, and will now display within Dreamweaver.

The Document Toolbar

You’ll find Dreamweaver’s Document toolbar above the Document window (where your WYSIWYG Design window displays). The Document toolbar contains such items as Code, Split, and Design, as shown in Figure 9-3.

Image from book
Figure 9-3: Working with the Document toolbar

The following summarizes the options on the Document toolbar:

  • Code: Displays the Code layout, where users may view and work directly with the web page’s HTML code.

  • Split: Displays both the Code and Design layouts in a split screen, so users can view both the Code layout and the Design layout.

  • Design: Displays the Design layout, where users may view and work in a WYSIWYG environment.

  • Title: Allows users to define the title for the page. This title appears in the title bar of the web browser when the web page is viewed.

  • No Browser/Check Errors: Provides options for checking the compatibility of different web browsers with your web page.

  • File Management: Provides file management options for web pages, such as uploading pages to your web server.

  • Preview in Browser: Allows users to preview web pages in different web browsers.

  • Refresh Design View: Refreshes the web page. This is necessary in order to see any changes you make to the web page.

  • View Options: Allows users to define settings for the current view, such as viewing rulers or grids.

  • Visual Aids: Allows users to show or hide areas of the layout, such as table borders.

The Standard Toolbar

Directly below the Document toolbar resides the Standard toolbar, as shown in Figure 9-4. Here’s where you’ll find items you’d find on most standard Windows toolbars, such as New, Open, Save, Copy, and Paste.

Image from book
Figure 9-4: Exploring the Standard toolbar

The following summarizes the options on the Standard toolbar:

  • New: Allows users to create a new web page.

  • Open: Allows users to open an existing web page.

  • Save: Allows users to save the currently open web page.

  • Save All: Allows users to save all web pages users currently have open in Dreamweaver.

  • Print Code: Allows users to print the HTML code that makes up a web page.

  • Cut: Allows users to cut the current selections (areas they have highlighted with their mouse) of their web page.

  • Copy: Allows users to copy the current selection (areas they have highlighted with their mouse) of their web page.

  • Paste: Allows users to paste the contents they’ve previously cut or copied.

  • Undo: Allows users to undo their last action.

  • Redo: Allows users to redo their last action.

The Insert Bar

Dreamweaver’s Insert bar (shown in Figure 9-5) contains buttons for creating and inserting objects, such as tables, layers, and images. The Insert bar is organized into several categories, which you can choose from on the left side of the bar. Each category conatins different options.

Image from book
Figure 9-5: Working with the Insert bar

The Insert bar contains the following categories:

  • Common Category: Acts as a one-stop area for adding common items such as hyperlinks, tables, images, and multimedia objects to your web pages.

  • Layout Category: Allows users to add page layout items, such as tables, layers, and framesets. Here, you can also choose among three views of tables: Standard (the default), Expanded, and Layout. When Layout mode is selected, you can use the layout table tools Draw Layout Cell and Draw Layout Table.

  • Forms Category: Allows users to add form elements to a web page. Forms provide a way to prompt users for information, and then carry out actions based on that input.

  • Text Category: Allows users to format text on web pages, as well as insert special characters. This is where you can add bold and italics to your text.

  • HTML Category: Allows users to select various HTML code to place into a web page, such as header content, tables, and frames.

  • Server-code Categories: An advanced feature that allows users to add server-side objects into web pages. A server-side object is code that performs actions on a web server (where the website is hosted) rather than the viewer’s computer. A CGI script is an example of a server-side application, while a JavaScript script is an example of a client-side application.

  • Application Category: Allows users to insert dynamic elements into their web pages, such as recordsets and repeated regions.

  • Flash elements Category: Enables users to add Macromedia Flash elements to their web pages. Flash elements are animated vector images.

    While Flash elements are cool to look at, you want to avoid overusing Flash in your websites. For starters, if a user doesn’t have a Flash plug-in, he won’t be able to view your web pages. Another reason is that search engines such as Google and Yahoo can’t read vector images. Too much Flash won’t help you be found on the search engines.

  • Favorites Category: Allows users to group and organize the Insert bar items in a single location.

Exploring the Properties Inspector

Now that you’ve gotten some of your bearings with Dreamweaver, let’s start putting Dreamweaver to work. Make sure your bing_home.html page is open. Then, let’s take a look at the Properties inspector at the bottom of your Document window, as shown in Figure 9-6.

Image from book
Figure 9-6: Working with the Properties inspector

The Properties inspector allows you to examine and edit properties within your web page, such as text, images, or objects. The contents of the Properties inspector change depending on the element you select.

For example, say you’re working with text. The Properties inspector displays properties related to text (such as text size, whether the text is bold, text justification, and text color). If you’re working with an image, the properties include width, height, and whether the image is a hyperlink.

Creating Background Images

One of the first things you’ll want to do when pulling Photoshop images into Dreamweaver is make them background images. Defining images as background images allows you to place text over them.

You’ll define these properties of your web page images within Dreamweaver’s Properties inspector. Perform the following:

  1. Select each of the images within the Dreamweaver tables and press the Delete key. This removes them from the Designer layout as shown in Figure 9-7. Don’t worry, though; you’ll add them back in a moment.

    Image from book
    Figure 9-7: Deleting images from your web page

  2. Select the first cell in your table (the one that held your title bar). Now, select the folder icon next to the Bg field in the Properties inspector, as shown in Figure 9-8. The Select Image Source dialog box displays.

    Image from book
    Figure 9-8: Defining a background image

    The Bg field is where you define background images.

  3. In the Select Image Source dialog box, go to the folder that contains the images for your web page. (Photoshop saved this folder in the same location you saved your web page.)

  4. Select the title bar image (it may be Bing_home_01.gif). If you’re not sure, press the View Menu icon. This is the last icon to the right of the Look in drop-down field. From the View menu, select Thumbnails. This displays a small picture of the images in this folder, as shown in Figure 9-9.

    Image from book
    Figure 9-9: Accessing images from the Select Image Source dialog box

  5. Press OK. You’re returned to the Design layout. Notice this image displays in your web page, as shown in Figure 9-10. If you look at the Properties inspector, the Bg field displays the Bing_home_01.gif image. That means this image now is a background image.

    Image from book
    Figure 9-10: Defining background images in a web page

    Continue working your way around the table cells. Add the appropriate images again as background images using the Properties inspector. When you’re finished, your screen should look like Figure 9-11.

    Image from book
    Figure 9-11: Changing all graphics to background images

You’ll want to perform these same steps with any images you create in Photoshop to change your images to background images. Making your graphics “background images” allows you flexibility when working with your web editor (no matter what the program, be it Macromedia Dreamweaver, Adobe GoLive, Microsoft FrontPage, or even Notepad).

Creating Rollover Buttons

In Chapter 4, you created some buttons for the Jonathan Bing web page. Let’s put those to work now. Perform the following steps in Dreamweaver:

  1. Access the following button files you created in Chapter 4. Save these files in the images folder associated with the bing_home.html web page you’ve been working on in this chapter.

    • bing_home1.gif

    • bing_home2.gif

    • bing_services1.gif

    • bing_services2.gif

    • bing_contact1.gif

    • bing_contact2.gif

      Note

      You can access these button files from the Chapter 9 folder in the downloadable files.

  2. With the bing_home.html page open in Dreamweaver, go to the cell that holds the navigation/title bar. In the Properties inspector, change the Vertical drop-down field to Bottom, as shown in Figure 9-12.

    Image from book
    Figure 9-12: Changing the vertical alignment of a table cell

    This changes the vertical alignment of this table cell. Thus, anything you add to this cell (text, images, etc.) will begin at the bottom.

  3. Make sure you’ve selected the cell where the navigation/title bar image resides. In Dreamweaver, go to the Insert bar. Select the down-facing arrow next to the Images icon and choose Rollover Image, as shown in Figure 9-13.

    Image from book
    Figure 9-13: Inserting a rollover image

  4. The Insert Rollover Image dialog box displays. Define the following, as shown in Figure 9-14.

    Image from book
    Figure 9-14: Defining the Home rollover button

    • Image name: Home

    • Original image: images/bing_home1.gif (you can select this using the Browse button)

    • Rollover image: images/bing_home2.gif (you can select this using the Browse button)

      Tip

      Although we left the When clicked, Go to URL text field blank (because we haven’t built any other pages for this website), normally you would want to use this field to link your button to another web page.
      Avoid having links and buttons that don’t lead anywhere, as links that don’t work correctly will annoy visitors to your web page.

  5. Press OK in the Insert Rollover Image dialog box. The Home rollover image is added to your web page.

  6. Hold down the Shift key while you press the Enter key twice.

  7. Go to the Insert bar again. Select the down-facing arrow next to the Images icon and choose Rollover Image.

  8. Perform the same action as you did in steps 4 and 5; however, this time name the image Services, and selectbing_services1.gif and bing_services2.gif.

  9. In the cell directly below the navigation/title bar, hold down the Shift key while you press the Enter key twice.

  10. Again, go to the Insert bar. Select the down-facing arrow next to the Images icon and choose Rollover Image.

  11. Perform the same action as you did in steps 4 and 5; however, this time name the image Contact, and selectbing_contact1.gif and bing_contact2.gif.

Your screen should look something like Figure 9-15.

Image from book
Figure 9-15: Adding rollover buttons to your web page
Tip

One of the nice things about Dreamweaver is that you don’t have to create rollover buttons in Photoshop. Go to Insert ▶Media ▶Flash Buttons to view a wide selection of predefined rollover buttons you can use in your web pages.

Adding Text to Your Web Page

Let’s finish up by adding some text to the Jonathan Bing web page. If you’ve used Microsoft Word or some other word processing program, you’ll probably find yourself right at home with Dreamweaver’s text tools.

To add text in Dreamweaver, all you need to do is type directly into the Dreamweaver Document window. You can also cut and paste from other documents (such as Microsoft Office programs).

In the Properties inspector there’s a Format drop-down field, a Size drop-down field, and a Style drop-down field. These and the other options of the Properties inspector allow you to modify your page’s text as needed.

Type some text now, and then play with the Properties inspector to modify this text. See if you can make your screen look something like Figure 9-16.

Image from book
Figure 9-16: Adding text to your web page

Previewing Your Web Pages

It’s a good idea to preview your web pages in an actual web browser as you work in Dreamweaver. This ensures that the pages are appearing and functioning as you wish.

To preview your web page, press the F12 key. You’re asked if you wish to save your web page. Go ahead and save your page. Your web page then displays in a web browser, as shown in Figure 9-17. As you roll your mouse over the buttons, notice how the buttons change.

Image from book
Figure 9-17: Viewing your web page in a web browser


Where to Go from Here

Congratulations! You’ve just designed a dazzling web page. Mr. Bing will be pleased.

In the next chapter, you’ll create another business site for the Jackson Steel Company, pulling together all the techniques you’ve learned to date.


Chapter 10: Creating a “Professional” Web Page Style

Overview

In this chapter, you’ll create a couple of professional-style web pages. By “professional,” I mean web pages companies would feel proud displaying over the World Wide Web.

Creating web pages for companies, no matter what their size, is always tricky. Not only must the design of your site fit the customer’s services and personality, but you must also consider the customer’s clients. You don’t want to create a website that confuses a customer’s clients, especially if those clients don’t use computers often.

Your web design business is beginning to flourish. With all the good work you’ve been doing, your business is getting calls due to word of mouth. Just this morning, a new client called: the Jackson Steel Company. Mr. Jackson III (the owner) isn’t sure what he wants in a website. He just knows that he doesn’t want anything “that flashes too much or has too many bells and whistles.”

“We’re a steel company,” he says over the phone, “not a florist.”

With those words in mind, let’s take a crack at designing a web page for him.


The Navigation Bar/Title Bar Style

A common website style you’ll see businesses use is one that contains a left navigation pane and a top title pane. You may have heard the term “frame” from some of your web design buddies, but when I say pane, I don’t mean frame.

Frames are a method to pull multiple web pages to show at once. You can create web pages that use frames in your web editor (Dreamweaver has some frame templates) or by typing the code in HTML.

Heed this warning: Don’t use frames in your web pages. At best, they look amateurish. At worst, they can cause parts of your web page to not display.

Splitting web pages into frames causes a multitude of problems. You can’t bookmark or easily print framed pages. And if a user enters your site without going through the main page, the frames don’t appear at all.

Rather than have the navigation pane and title panes as web pages (which is what many frames do), we just make them images.

Creating a Metallic Navigation Bar

Since this site is for a steel company, let’s create some metallic imagery for your web page.

Let’s start creating the navigation bar, title bar, and contents area for Mr. Jackson III. Perform the following steps:

  1. Fire up Photoshop. Go to File ▶New in the menu bar. Define the following:

    • Width: 775

    • Height: 420

    • Resolution: 72

    • Color Mode: RGB Color

    • Background Contents: Transparent

  2. Click OK. The image window displays.

  3. Rename Layer 1 as nav bar.

  4. Select the Rectangle tool (available from the Vector Shapes tools in the toolbox).

  5. Make sure you’ve selected the Shapes Layer icon in the options bar.

  6. Double-click the Color icon in the options bar. The Color Picker dialog box displays.

  7. In the Color Picker dialog box, change the RGB color to 170, 170, 170 (a shade of gray). Then click OK.

  8. Draw a rectangle shape toward the right side of your image window. Extend the right side of the rectangle to about 200 pixels, as shown in Figure 10-1.

    Image from book
    Figure 10-1: Creating a navigation bar

  9. Right-click on a line of the shape. A submenu displays. Select Make Selection from the submenu. The Make Selection dialog box displays.

    Tip

    You must select a line that’s within the image window to access the submenu.

  10. In the Make Selection dialog box, define the following (as shown in Figure 10-2):

    Image from book
    Figure 10-2: Defining your selection

    • Feather Radius: 0 pixels

    • Anti-aliased: checked

    • New Selection: selected

  11. Click OK. This selection becomes a shape.

  12. Right-click on the nav bar layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

  13. Check the Drop Shadow check box in the Layer Style dialog box.

  14. Check the Bevel and Emboss and Contour check boxes in the Layer Style dialog box. Then, left-click once on the Bevel and Emboss option. Details associated with this option display on the right side of the Layer Style dialog box.

  15. Define the following in the Bevel and Emboss Structure and Shading areas, as shown in Figure 10-3:

    Image from book
    Figure 10-3: Defining the bevel and emboss options to create a metallic effect

    • Style: Inner Bevel

    • Technique: Smooth

    • Depth: 100%

    • Direction: Up

    • Size: 5 px

    • Soften: 0 px

    • Angle: 120º

    • Use Global Light: checked

    • Gloss Contour: Ring

    • Anti-aliased: not checked

    • Highlight Mode: Screen

    • Opacity: 75%

    • Shadow Mode: Multiply

    • Opacity: 75%

      Note

      When you select Contour, most of the previous settings become defined by default. Perhaps the only setting you will need to make is to change the Gloss Contour setting to Ring.

  16. Check the Gradient Overlay check box at the left of the Layer Style dialog box. Left-click once in the Gradient Over- lay check box. The Gradient Overlay detail displays in the right side of the Layer Style dialog box.

  17. Define the following Gradient Overlay settings, as shown in Figure 10-4.

    Image from book
    Figure 10-4: Defining a metallic gradient overlay

    • Blend Mode: Overlay

    • Opacity: 75%

    • Style: Linear

    • Angle: 90º

    • Scale: 100%

  18. Double-click the Gradient drop-down field (in the Gradient Overlay details). The Gradient Editor dialog box displays.

  19. In the Gradient Editor dialog box, click on the black arrow below the gradient bar. Then click somewhere underneath and toward the middle of the gradient bar. A black arrow displays, as shown in Figure 10-5.

    Image from book
    Figure 10-5: Adding a black gradient arrow to the gradient bar

  20. Select the white arrow located at the bottom right of the gradient bar. Create an alternating black-white-black-white pattern by clicking below the gradient bar, as shown in Figure 10-6.

    Image from book
    Figure 10-6: Creating an alternating black-white gradient

  21. Click OK on the Gradient Editor dialog box, and on the Layer Style dialog box. Your screen should look like Figure 10-7.

    Image from book
    Figure 10-7: Creating a navigation bar with a metallic gradient

Creating a Logo

Not all logos have to be fancy, graphical images. Sometimes, applying different styles to the company name is enough. The group at Jackson Steel Company isn’t too receptive to flowery, graphical images filling their site. Let’s just play it safe and make a logo using text only.

  1. In the same image, create a new layer. Call this new layer logo.

  2. Double-click the foreground color. The Color Picker dialog box displays. Define your RGB as 0, 0, 0. Then click OK.

  3. Select Window ▶Character from the menu bar. The Character palette displays.

  4. Define the following in the Character palette, as shown in Figure 10-8:

    • Font Family: Impact

    • Font Size: 24 pt

    • Leading: (Auto)

    • Tracking: 25

    • Vertically Scale: 100%

    • Horizontally Scale: 100%

    • Baseline Shift: 0 pt

    • Color: RGB = 0, 0, 05. In the options bar, select the Right align text icon.

      Image from book
      Figure 10-8: Defining the Jackson Steel Company logo

  5. Make sure you’re in the logo layer. Then, type Jackson Steel Company at the top of the navigation bar. Your screen should look similar to Figure 10-9.

    Image from book
    Figure 10-9: Creating the Jackson Steel Company logo

  6. Right-click on the logo layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

  7. Select the Styles option and then select the right-facing arrow. A submenu displays. Select the Text Effects 2 style, as shown in Figure 10-10.

    Image from book
    Figure 10-10: Selecting the Text Effects 2 style

    Note

    A message box displays, asking if you wish to replace the current style with the Text Effects 2 style. Press OK to accept this new style.

  8. Select the Dented Thin Aluminum style from the Text Effects 2 options, then click OK. Your screen should look like Figure 10-11.

    Image from book
    Figure 10-11: Creating a metallic logo

Adding a Steel Plate Graphic to Your Web Page

Let’s take a look at another steel texture you can create. We’ll add a brushed steel plate to this page — a graphical element that will help the Jackson Steel Company stand out. Try the following:

  1. Create a new layer called Steel Plate.

  2. Select the Rectangle tool from the toolbox (this is available from the Vector Shape tools).

  3. Make sure you’re in the Steel Plate layer. Then, hold the Shift key and draw a square somewhere in the transparent area of your image window.

  4. Double-click the Foreground Color icon in the toolbox. The Color Picker dialog box displays. Change the RGB to 118, 118, 118, and click OK.

  5. Select the Paint Bucket tool. Click within your shape. The square turns a dark gray.

  6. Press Ctrl+T (or select Edit ▶Free Transform from the menu bar). Rotate your steel plate to the left. Then place it at the lower side of your navigation bar, as shown in Figure 10-12.

    Image from book
    Figure 10-12: Creating a steel plate graphic

  7. Press Enter. Now, let’s add some metallic effects to this plate.

  8. Select Filter ▶Noise ▶Add Noise from the menu bar. The Add Noise dialog box displays.

  9. Define the following in the Add Noise dialog box, as shown in Figure 10-13:

    • Amount: 50%

    • Distribution: Gaussian

    • Monochromatic: checked

      Image from book
      Figure 10-13: Adding noise to your steel plate graphic

  10. Select Filter ▶Blur ▶Motion Blur from the menu bar. The Motion Blur dialog box displays.

  11. In the Motion Blur dialog box, set the Angle to 0° and the Distance to 20 pixels, as shown in Figure 10-14.

    Image from book
    Figure 10-14: Defining a motion blur

  12. Click OK. Let’s run the motion blur one more time to get a smoother texture. Select Filter ▶Blur ▶Motion Blur from the menu bar. The Motion Blur dialog box displays again.

  13. Right-click in the steel plate layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

  14. Check the Drop Shadow, Bevel and Emboss, and Contour check boxes.

  15. Click OK. Your screen should look like Figure 10-15.

    Image from book
    Figure 10-15: Adding effects to your steel plate graphic

Adding Text to your Steel Plate Graphic

Now that you’ve created a steel plate graphic, let’s add some text. Try the following:

  1. Create a new layer. Call this new layer plate text.

  2. Change the foreground color to black (RGB = 0, 0, 0). Then, select the Text tool.

  3. Select the Center Text icon from the options bar.

  4. Type Forged in Steel over the steel plate.

  5. Press Ctrl+T. Rotate your text to the left, so it is parallel with the steel plate graphic, as shown in Figure 10-16.

    Image from book
    Figure 10-16: Adding text to the steel plate

  6. Let’s add a metallic look to this text. Right-click on the plate text layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

  7. Select the Styles option. Select the right-facing arrow. A submenu displays.

  8. Select the Text Effects style. In this style set, select the Frosted Glass style.

  9. Check the Color Overlay check box in the Blending Options area. Left-click once on the Color Overlay item. Additional options for the color overlay display in the right side of the Layer Style dialog box.

  10. Double-click the color box (next to the Blend Mode drop-down field). The Color Picker dialog box displays. Change the RGB to 255, 255, 255.

  11. Click OK in the Color Picker dialog box. Click OK in the Layer Style dialog box. Your screen should look like Figure 10-17.

    Image from book
    Figure 10-17: Finishing your steel plate graphic

Creating a Contents Area

Now that you’ve created your navigation area, we need some content for the page. Let’s make a rounded rectangle shape to house the informative content for the site.

  1. Create a new layer. Call this new layer contents window.

  2. Select the Rounded Rectangle tool from the toolbox (this is found in the Vector Shapes tools).

  3. Make sure you’re in the contents window layer. Draw a rectangle shape in the transparent area of your image.

  4. Right-click on an edge of this shape. A submenu displays. Select Make Selection from the submenu.

  5. Double-click the Foreground Color icon in the toolbox. The Color Picker dialog box displays. Change the RGB to 225, 225, 225, then click OK.

  6. Select the Gradient tool from the toolbox. Click and drag from the top-left corner of the image to the bottom-right corner. This draws a line that will define the direction of your gradient, as shown in Figure 10-18.

    Image from book
    Figure 10-18: Creating a gradient with the Gradient tool

    Tip

    The first point you click will define where the dark portion of your gradient starts. The last point you click will define where the light portion of your gradient ends.

  7. Release your mouse. Your contents window layer should fill with a light gray gradient, as shown in Figure 10-19.

    Image from book
    Figure 10-19: Filling your contents window with a light gray gradient

  8. Right-click on the contents window layer. A submenu displays. Select Blending Options from the submenu. The Layer Style dialog box displays.

  9. Check the Drop Shadow and Bevel and Emboss check boxes. Press Ctrl+D to deselect this shape. Then click OK. Your screen should look like Figure 10-20.

    Image from book
    Figure 10-20: Creating a contents window for your website

Creating Slices in Photoshop

Tables are a common technique used in web design today. To control the content of web pages, such as how your text and images display, web designers use tables within their HTML. Table cells allow you to better define how a web page should look. With tables, you can ensure that text and images align correctly through the use of rows and columns.

You’ve already done some design with tables when you used the Slice tool back in Chapter 7. The Slice tool helps you divide your images into workable tables. Before we get started, save your work as Jackson_home.psd.

Let’s continue with our web page design. Perform the following:

  1. Select the Slice tool from the toolbox.

  2. Click and drag to draw your slices. Create the following slices, as shown in Figure 10-21:

    • Slice 01: Around the navigation bar and steel plate graphic

    • Slice 02: Around the top, which will hold the title of the page

    • Slice 03: Around the contents window area

      Image from book
      Figure 10-21: Slicing your image

  3. Select File ▶Save for Web from the menu bar. The Save For Web dialog box displays.

  4. In the Save For Web dialog box, change the file format (the first drop-down field on the right side of the screen) to JPEG.

  5. Press the Save button. A Save Optimized As dialog box displays. Name your file Jackson_home.html, and change the Save type as text box to HTML and Images. Then, navigate to where you wish to save this file.

Editing Your Web Page in Dreamweaver

Let’s finish your page with some text. We’ll open your HTML file in Dreamweaver and add a title and content to your web page.

  1. Fire up Dreamweaver. Open your Jackson_home.html page.

  2. Select the navigation bar image and press the Delete key on your keyboard.

  3. Press the background folder icon in Dreamweaver (it resides next to the first Bg text field located within the Properties inspector). An explorer window displays, allowing you to navigate to your files.

  4. Navigate to the images folder. You’ll find this folder in the same location as the Jackson_home.html file. Photoshop automatically creates an images folder whenever you slice images and save them for the web.

  5. Find the image for your navigation bar. Select the image and you’ll find it now fills in the Bg text field.

  6. Repeat steps 2 through 5, deleting and then selecting the appropriate images for the contents window graphic and the About Jackson Steel graphic. Setting your images in the Bg text field allows you to type text over them, which is useful when adding content to your web pages.

    Image from book
    Figure 10-22: Opening the Jackson Steel web page in Dreamweaver

  7. Select Insert ▶Table from the menu bar in Dreamweaver. The Table dialog box displays.

  8. Define the following, as shown in Figure 10-23.

    • Rows: 1

    • Columns: 2

    • Border thickness: 0

    • Cell padding: 0

    • Cell spacing: 0

      Image from book
      Figure 10-23: Defining a table inDreamweaver

    Defining a table in this manner allows you to align your text in straight columns and rows. You won’t see the table at all with the thickness, padding, and spacing set to 0.

  9. Create a similar table over the navigation bar. You can set the horizontal and vertical alignment at the bottom of the screen (where you set the background information). Use your mouse to click and drag the sizes of your table.

    After performing these tasks, your tables should look something like Figure 10-24.

    Image from book
    Figure 10-24: Setting up tables (without borders) for your web page content

Add various text within your page. You might want to delete the About Jackson Steel graphic and type in a title using Dream- weaver. I’ve done just that in Figure 10-24 using a Bold Verdana font.

A text title will allow you to easily use this page over and over again to create new pages for this website. Say you want to add a Contacts page.

Just save this web page with a different file name in Dreamweaver (perhaps changing it to Jackson_contacts.html). Then, all you have to do is change the text title to Contacts and you’re ready to go. This beats having to create a new text graphic in Photoshop every time you need to create a new web page.

Figure 10-25 shows the final result of your web page. It’s ready now to save and launch on the World Wide Web.

Image from book
Figure 10-25: Viewing the Jackson Steel web page in a web browser


Where to Go from Here

Good news! You showed your samples to Mr. Jackson III and he loved them. He wants you to redo the company’s entire site! Business is good — and continues to boom. In the next chapter, you’ll look at creating a site in the “Microsoft” style with sans-serif text, stark images, and bold colors to complete the San Simeon Software Group web page.


Chapter 11: Designing a “Modern” Web Page Style

Overview

The style and flavor of what’s popular in web design is constantly in flux. A couple years ago, people loved flowery graphical imagery, such as realistic textures, beveling, and shadows.

Many sites today are using sans-serif fonts, mono or duo-colored areas, text saved as pictures, and objects that don’t cast shadows in place of flowery graphical pages.

This modern style has become more and more popular these days, with information arranged into neatly aligned tables. This chapter explores creating a modern styled web page.


The San Simeon Software Group

In this chapter, you’ll create a modern style web page for San Simeon Software. The group at San Simeon is a serious bunch of software engineers. They want a web presence that suggests as much.

Creating a Modern Logo Layer

Modern logos often use sans-serif fonts (fonts without the fancy curly ends like those of Times New Roman). They also use white space and incorporate some bold color. Perform the following to create a logo for our friends at San Simeon Software:

  1. Fire up Photoshop. Since you’ve become more familiar with Photoshop, we’ll create all elements of your web page in one file, using multiple layers.

  2. Go to File ▶New. The New dialog box displays. Enter the following information:

    • Width: 775 pixels

    • Height: 420 pixels

    • Resolution: 72 pixels/inch

    • Color Mode: RGB Color 8 bit

    • Background Contents: White

  3. Press OK. A new image window displays.

  4. Create a new layer. Name this new layer logo.

  5. Select Window ▶Character from the menu bar. The Character palette displays. Enter the following information, as shown in Figure 11-1. Then press OK:

    • Font Family: Verdana

    • Font Style: Bold

    • Font Size: 30 pt

    • Leading: (Auto)

    • Tracking: –100

      Image from book
      Figure 11-1: Defining the San Simeon Software logo

    • Color: RGB = 82, 121, 81

    • Anti-aliasing Method: Smooth

  6. Select the Horizontal Text tool from the toolbox. Then type SanSimeonSoftware toward the upper-left side of your blank image.

    Don’t use any spaces. Type all the words together, as shown in Figure 11-2.

    Image from book
    Figure 11-2: Typing the San Simeon logo

  7. Select the Horizontal Text tool and use it to highlight the “Software” portion of your logo.

  8. Double-click the foreground from the toolbar. The Color Picker dialog box displays. Change the RGB to 255, 185, 22 and press OK. The “Software” portion of your logo changes to yellow, as shown in Figure 11-3.

    Image from book
    Figure 11-3: Coloring a portion of your logo

Now that you’ve created your logo, let’s move on to creating the rest of the site.

Tip

A company’s logo will often set the tone for the rest of a website. Thus, when finding the right style for a client’s website, the first place to start is the look and feel of their logo.

Creating the Navigation Bar Layer

After working on the new logo, let’s now create the navigational menu for the San Simeon Software group. Perform the following:

  1. Create a new layer and call it nav bar.

  2. Select the Rectangle tool from the toolbox. Draw a rectangle down the left side of the window starting right below the San Simeon logo.

  3. Right-click on the rectangle with your mouse. Then select Make Selection from the submenu.

  4. Double-click on the foreground color. The Color Picker dialog box displays. Change the RGB to 255, 185, 22 and click OK.

  5. Select the Paint Bucket tool from the toolbox. Click within the rectangle. You screen should look like Figure 11-4.

    Image from book
    Figure 11-4: Drawing a navigational menu bar

  6. Press Ctrl+D to deselect the navigational bar.

At this point, let’s save our work. Save the file as Simeon_ home.psd.

Creating a Watermark Layer

Just because the San Simeon Software group wants a minimalist website doesn’t mean this site has to be boring. Let’s create a watermark effect that will run up and down the navigational bar.

  1. Create a new layer called watermark 1.

  2. Select the Elliptical Marquee tool from the toolbox. In the options bar, make sure the Feather text box is set to 0 px.

  3. With the watermark 1 layer selected, draw an oval, as shown in Figure 11-5.

    Image from book
    Figure 11-5: Drawing an oval watermark

  4. In the options bar, select the Add to Selection icon. Then, click the Rectangular Marquee tool.

  5. Draw a rectangle that does not extend past the right side of the oval. Then, drag your rectangle downward. You’ve created a new watermark shape, as shown in Figure 11-6.

    Image from book
    Figure 11-6: Adding to your watermark shape

  6. Double-click on the foreground color from the toolbox. The Color Picker dialog box displays. Change the foreground color to white (RGB = 255, 255, 255), then press OK.

  7. Choose the Paint Bucket tool from the toolbox. Click within the watermark selection.

  8. In the watermark 1 layer, change Opacity to 20%.

  9. Press Ctrl+T to transform your watermark. Grab the right side and pull it so it’s flush with the right edge of the navigational bar, as shown in Figure 11-7.

    Image from book
    Figure 11-7: Transforming the watermark to fit the navigational bar

  10. Press Ctrl+D to deselect the watermark layer.

  11. Let’s add a couple more watermarks. Right-click on the water- mark 1 layer and select Duplicate Layer. The Duplicate Layer dialog box displays.

  12. Change the name of your duplicate layer to watermark 2, then press OK. Your first watermark layer is duplicated.

  13. Select the Move tool from the toolbox. Make sure you are in the watermark 2 layer.

  14. Hold down the Shift key, then press the Down Arrow key on your keyboard 10 times. You screen should look like Figure 11-8.

    Image from book
    Figure 11-8: Creating a duplicate layer for your watermark

Adding Menus to the Navigational Bar

Now that you’ve developed your navigational bar, let’s add some menus to it. We’ll create the following areas for our navigational menu:

  • Products

  • Services

  • Site Index

Let’s go ahead and create these now.

  1. Create a new layer called products menu.

  2. Select Window ▶Character. The Character palette displays. Enter the following information, as shown in Figure 11-9.

    • Font Family: Verdana

    • Font Style: Regular

    • Font Size: 14 pt

      Image from book
      Figure 11-9: Defining the navigational menu text

    • Leading: 100%

    • Tracking: 0

    • Color: RGB = 255, 255, 255

    • Anti-aliasing Method: Smooth

  3. Select the Text tool from the toolbox. Make sure that you are in the products menu layer, then type Products. Your screen should look similar to Figure 11-10.

    Image from book
    Figure 11-10: Adding a menu to your navigational bar

  4. Right-click on the products menu layer, then select Duplicate Layer. Rename your duplicate layer services.

  5. Select the Move tool from the toolbox. Hold your Shift key and press the Down Arrow eight times.

  6. Select the Text tool and highlight the text Products (that you just moved down eight times). Type the word Services, as shown in Figure 11-11. Use the Move tool to center your text if necessary.

    Image from book
    Figure 11-11: Adding a Services menu to your navigational bar

  7. Right-click on the services layer, then select Duplicate Layer. Rename your duplicate layer site index.

  8. Select the Move tool from the toolbox. Hold the Shift key and press the Down Arrow 10 times.

  9. Select the Text tool and highlight the text Services (that you just moved down 10 times). Type Site Index, as shown in Figure 11-12. Use the Move tool to center your text if necessary.

    Image from book
    Figure 11-12: Adding a Site Index menu to your navigational bar

Creating Colored Menu Sections

In addition to the key menus available from the navigational bar, let’s add menus on the right side of the screen. We’ll place the menus on the right side in colored boxes. Try the following:

  1. Create a new layer called company.

  2. Select the Rectangular Marquee tool. Draw a small rectangle shape.

  3. Double-click the foreground color on the toolbar. The Color Picker dialog box displays. Change the RGB to 255, 185, 222 (the San Simeon Software yellow), then click OK.

  4. Click the Paint Bucket tool from the toolbar. Then click within the rectangle you just drew. Your screen should look like Figure 11-13.

    Image from book
    Figure 11-13: Creating a colored menu section

  5. Create a new layer called company text.

  6. Use the same text size you used in the navigational bar text. The settings are as follows (available from Window ▶Character):

    • Font Family: Verdana

    • Font Style: Regular

    • Font Size: 14 pt

    • Leading: 100%

    • Tracking: 0

    • Color: RGB = 255, 255, 255

    • Anti-aliasing Method: Smooth

  7. Select the Text tool, then type the word Company over the yellow box. Use the Move tool to center this text if necessary. Your screen should look like Figure 11-14.

    Image from book
    Figure 11-14: Adding text to the Company colored menu

  8. Right-click on the company layer, then select Duplicate Layer. Rename your duplicate layer solutions.

  9. Select the Move tool from the toolbox. Hold the Shift key and press the Down Arrow 10 times.

  10. Select the Magic Wand tool. Click this new rectangle you just moved down the page.

  11. Double-click the foreground color in the toolbox. The Color Picker dialog box displays. Change the RGB to 249, 147, 150 (this is a nice rose color that complements the San Simeon green you used earlier), then press OK.

  12. Select the Paint Bucket tool from the toolbox. Click within the solutions rectangle. The box fills with the rose color.

  13. Right-click within the company text layer, then select Duplicate Layer. Rename your duplicate layer solutions text.

  14. Select the Move tool from the toolbox. Hold the Shift key and press the Down Arrow 10 times.

  15. Select the Text tool and highlight the text Company (that you just moved down 10 times). Type Solutions, as shown in Figure 11-15. Use the Move tool to center your text if necessary.

    Image from book
    Figure 11-15: Adding the Solutions text to your Solutions colored menu

Adding Photos to Your Web Page

Everyone likes pictures. Adding a few images of things relevant to the site can help a website appear more inviting. You don’t want to fill your pages with text only. Too much text will scare visitors away.

Since the San Simeon Software group provides network, software, and customer service services, let’s find three images that capture these themes, as shown in Figure 11-16.

Image from book
Figure 11-16: Selecting images to use in the San Simeon Software website
Note

You can access the software.jpg and customer service.jpg files from the Chapter 11 folder of the companion files, available at www.wordware.com/files/webdesign.

Once you’ve got these files open, let’s tweak them a bit. Not only is Photoshop a great program in which to create shapes, but it’s also a great program for adding special effects to your images. Let’s explore some of these different effects.

Replacing Traditional Photography Filters

Photoshop can easily reproduce many photography filters — things the pros use to warm or cool pictures to create a more dramatic mood for a photograph. Perform the following to get a taste of Photoshop’s digital photography filters:

  1. Select the software.jpg image. This is the image to which we’ll apply a lens filter effect.

  2. In the Layers palette, select the Create New Adjustment Layer icon. This icon is the half black and half white circle icon at the bottom of the Layers palette.

  3. A submenu displays. Select Photo Filter from this submenu, as shown in Figure 11-17.

    Image from book
    Figure 11-17: Selecting the photo filters

  4. The Photo Filter dialog box displays. Click and hold on the Filter drop-down field. A list of filters displays. Select Cooling Filter (82), as shown in Figure 11-18.

    Image from book
    Figure 11-18: Selecting the Cooling Filter (82) lens filter

  5. If you want to make the blue a little more dramatic, move the Density slider to the right. Let’s move it from 25% to about 75%. Then click OK.

  6. Go to Image ▶Image Size. Change the Width and Height to 25%, then click OK. You’ve now shrunk your image.

  7. Press Ctrl+Shift+E to merge all visible layers. Then, drag it onto the San Simeon Software image, somewhere below the Solutions colored menu.

  8. Select the layer this software graphic is on. Change the name of the layer to software, then change the opacity of that layer to 50% (using the Opacity drop-down field on the Layers palette).

    Your image should look like Figure 11-19.

    Image from book
    Figure 11-19: Adding a software image to the San Simeon Software website

Dodging and Burning Your Photos

Dodging and burning allows you to tweak the lightness (dodging) and darkness (burning) of images. Unfortunately, the dodging and burning tools available in Photoshop don’t allow much control. Not only do they not allow you to control the dodging and burning easily, but they also screw up your original image data.

There’s a better way to get dodging and burning results with your photos in Photoshop — a method professional designers use. Perform the following:

  1. Select the customer service.jpg image. It’s dark at the top of this image and light at the bottom. Let’s use some dodge and burn techniques to fix these areas of our image.

  2. In the Layers palette, select the right-facing arrow directly above the Opacity drop-down field. A submenu displays. Select New Layer, as shown in Figure 11-20. The New Layer dialog box displays.

    Image from book
    Figure 11-20: Creating a new layer from the Layers palette

    Tip

    You’ll need to create a new layer using this method rather than clicking on the Create New Layer icon at the bottom of the Layers palette. The Create New Layer icon does not bring up the New Layer dialog box, while this method of selecting from the right-facing arrow does.
    For this technique to work, you’ll need to define some settings in the New Layer dialog box.

  3. In the New Layer dialog box, define the following settings:

    • Name: dodge and burn

    • Color: None

    • Mode: Overlay

    • Opacity: 100%

    • Fill with Overlay-neutral color (50% gray): checked

    Your screen should look like Figure 11-21.

    Image from book
    Figure 11-21: Defining your new layer

  4. Press the OK button. A new layer displays above your background layer and is filled with gray. The Overlay setting, however, allows Photoshop to ignore the color. You’ll see how this all comes into play in a moment.

  5. Select the Brush tool from the toolbox (it’s the fourth tool from the top, on the right side of the toolbox).

  6. In the options bar, select the down-facing arrow next to the Brush option. A drop-down list displays, filled with the different brushes you can select.

  7. Select a soft-edged brush from this brush picker (such as Brush 65, as shown in Figure 11-22). Then, change the Opacity in the options bar to 25%.

    Image from book
    Figure 11-22: Selecting a soft-edged brush

  8. Change the foreground color in the toolbox to white.

    Tip

    Want a shortcut for changing your foreground color to white or black? Press the letter D on your keyboard. The foreground color changes to black. To change your foreground color to white, press the letter D and then the letter X.

  9. With your Brush tool selected, select the background layer. Then, click and hold to paint over the top part of your image. If the dodge effect isn’t light enough, release your mouse and then click and hold again as you paint over the area. Your image should look something like Figure 11-23.

    Image from book
    Figure 11-23: Using a dodge effect to lighten up dark areas

  10. Change the foreground color to black. Select the background layer and paint over the keyboard.

    Image from book
    Figure 11-24: Using a burn effect to darken light areas

  11. Go to Image ▶Image Size. Change the Width and Height to 25%, then click OK. You’ve now shrunk your image.

  12. Press Ctrl+Shift+E to merge all visible layers. Then, drag it onto the San Simeon Software image, somewhere below the software image.

  13. Select the layer this software graphic is on. Change the name of the layer to customer service. Your image should look like Figure 11-25.

    Image from book
    Figure 11-25: Adding a customer service photo to the San Simeon Software website

You’ve done a lot of work up to this point. Let’s save the file again before moving on.

Slicing Your Images in Photoshop

Now that you’ve gotten your images created, let’s slice them in Photoshop, as you first learned to do in Chapter 7. Once you chop your image into slices, you can then pull the pieces into Dream- weaver (or some other web editing program) and add your text.

  1. Select the Slice tool from the toolbox. Click and hold to draw your slices. Create the following slices, as displayed in Figure 11-26:

    • Slice 01: Around the SanSimeonSoftware web header

    • Slice 02: Around the green navigation bar on the left side of the image

    • Slice 03: Around the white space in the center of the image

    • Slice 04: Around colored menu selections on the right side of the image

      Image from book
      Figure 11-26: Slicing your image in Photoshop

      Note

      Photoshop automatically appends 01, 02, etc., to the file name if you do not define a name.

  2. Select File ▶Save for Web from the menu bar. The Save For Web dialog box displays.

  3. In the Save For Web dialog box, change the file format (the first drop-down field on the right side of the screen) to JPEG.

  4. Press the Save button. A Save Optimized As dialog box displays. Name your file Simeon_home.html, and change the Save type as text box to HTML and Images. Then, navigate to where you wish to save this file.

Editing Your Web Page in Dreamweaver

Now the fun begins — filling your image with content. ImageReady creates an HTML file you can hand code, or you can simply open your HTML file in your favorite web editing program and add your content just like you would a word processing document.

Although we’ve used Dreamweaver throughout this book for our web editing, you can use various programs, including FrontPage and GoLive. You could even use Notepad if you so wanted. The choice is up to you.

  1. Fire up Dreamweaver. Then, open your Simeon_home.html page. Your screen should look like Figure 11-27.

    Image from book
    Figure 11-27: Opening the San Simeon web page in Dreamweaver

  2. Add various text within your page. Remember to use a sans-serif font like Verdana. Also, a gray font works nicely in breaking up the white space. Add some text — whatever the client wants.


Creating Background Images

Like you did in Chapter 9, let’s first define our background images before going any further. Dreamweaver’s Properties inspector is where you’ll perform the following:

  1. Select each of the images within the Dreamweaver tables and hit your Delete key. This removes them from the Designer Layout. Don’t worry, though; you’ll add them back in a moment.

  2. Select the first cell in your table (the one that held your title bar). Now, press the folder next to the Bg field in the Properties inspector. The Select Image Source dialog box displays.

    The Bg field is where you define background images.

  3. In the Select Image Source dialog box, go to the folder that contains the images for your web page. (Photoshop saved this folder in the same location you saved your web page.)

  4. Select the title bar image (it may be Simeon_home_01.gif). If you’re not sure, press the View Menu icon. This is the icon next to the Look in drop-down field. From the View menu, select Thumbnails.

  5. Press OK. You’re returned to the Designer Layout. Notice this image displays in your web page. If you look at the Properties inspector, the Bg field displays the Simeon_home_01.gif image. That means this image now is a background image.

Continue working your way around the table cells. Add the appropriate images again as background images using the Properties inspector.

Tip

You may need to adjust the tables as you add these background images. Sometimes too much of the background image displays and you see tiling. Other times you’ll find that too little of your background image displays, thus cutting off half of your image.
You can adjust tables by placing your cursor over a table border. Your cursor will change into a double parallel line with two arrows pointing in opposite directions. Click and drag your mouse over a table border, and you’ll find yourself adjusting the size of a table cell.

Slivers and Backgrounds

Remember the gradient background and sliver you created in Chapter 8? Let’s add these now to the San Simeon web page. Perform the following steps:

  1. In Dreamweaver, click and delete the center contents area of your web page.

  2. Press the folder next to the Bg field in the Properties inspector. The Select Image Source dialog box displays.

    The Bg field is where you define background images.

  3. In the Select Image Source dialog box, go to the folder that contains the grn-grad.png image you created in Chapter 8.

    Note

    You can find this file in the Chapter 11 folder of the companion files, available at www.wordware.com/files/webdesign.

  4. Press OK. You’re returned to the Designer Layout. Notice this image displays in your web page, as shown in Figure 11-28.

    Image from book
    Figure 11-28: Adding a background image to your web page

Drawing a Layout Table Cell

Notice that your background image tiles. Your image’s width blends seamlessly, but the height tiles over and over. Let’s correct that now with the sliver you created in Chapter 8.

  1. In the Dreamweaver Insert bar, select the Layout mode. Then select the Layout view (next to the Standard and Expanded modes), as shown in Figure 11-29.

    Image from book
    Figure 11-29: Selecting the Layout mode from the Insert bar

  2. Select the Draw Layout Cell option in the Insert bar.

  3. Click and drag your mouse to make a new table cell within the contents area. Cover up the bottom two background images that tile, as shown in Figure 11-30.

    Image from book
    Figure 11-30: Adding a table cell with the Draw Layout Cell option

  4. Click the [exit] hyperlink at the top of your web page (next to the Layout mode text) to exit the Layout mode. Notice your background images are gone, and the center contents area is now divided into two cells.

    Image from book
    Figure 11-31: Viewing the results of adding cells to your web page

Merging Cells

Unfortunately, you may notice the right and left sides of the screen now tile. This is easy to correct. Let’s merge some table cells on your screen to get rid of some of this tiling.

  1. Click and drag your mouse over the two cells on the right side of your web page. These are the cells that contain the colored menu selections.

  2. Release your mouse. Then right-click within this selected area. A pop-up menu displays. Select Table ▶Merge Cells from this menu, as shown in Figure 11-32.

    Image from book
    Figure 11-32: Merging table cells

Once you release your mouse, these two cells on the right side merge. You should see only one instance of the color menu selections. These should not tile.

Do the same for the navigation menu on the left side of your web page (merge these two cells). Once you’ve done this, you’re ready to add your background and sliver images.

Adding a Background and Sliver Image

In the top cell, add the grn-grad.png file as a background image. In the bottom cell, add the grn-grad-sliver.png file as a background image. Your screen should look like Figure 11-33.

Image from book
Figure 11-33: Adding background and sliver images
Note

You can find these files in the Chapter 11 folder of the companion files, available at www.wordware.com/files/webdesign.

Adding Content

To finish up your web page, add some content and maybe a navigational footer at the bottom of your web page. Then preview your page in a web browser. Try to make your web page look like Figure 11-34.

Image from book
Figure 11-34: Adding content to your web page


Where to Go from Here

In this chapter, you’ve gotten a taste of the “modern” style of web design — filled with sans-serif text, solid colors, and straight lines. In the next chapter, you’ll compare the difference between web hosts in order to find the best place for hosting your website. You’ll also explore the different tools you can use to upload your pages to the World Wide Web.


Chapter 12: Going Live with Your Website

“OK, I’ve built my website. Now how do I get it on the World Wide Web?”

That’s a common question, with a multitude of answers depending on your needs. The material in this chapter should help you find the best place and method for posting your web pages to the World Wide Web. The best solution for your web hosting needs depends on the type of website.

What Kind of Website Are You Publishing?

What kind of website are you planning to publish? It probably falls into one of these categories:

  • Personal (or hobby) website

  • Business website

  • E-commerce website

Why worry about the type of website you wish to publish? Aren’t all websites the same? Sure, there’s different types of information from one website to another, but why worry about the type of website you’re publishing?

The answer is this: Depending on the type of website you’re putting up, you need to consider the file space your website needs and the expected traffic load of your website. You don’t want to get your website up and running only to find that you’ve already run out of your allotted space.

Personal (or Hobby) Websites

Personal (or hobby) websites are those you create to communicate with family or friends. Personal sites also include those dedicated to your hobbies, as well as fan sites. These types of websites are usually small and won’t bring much Internet traffic (at least not at first).

For these kinds of websites, check out free web hosting services. Some free web hosting services that come to mind are as follows:

  • Your Internet service provider (ISP). Many of these provide their customers with the ability to publish personal web pages as part of their service. There may be size limits with these sites. Often, you can buy extra file space for a small fee.

  • Free web hosting services. These include websites such as www.geocities.com, www.homestead.com, and www.tripod.lycos.com. You’ll get a free place to park your website; however, usually the host then gets to place advertisements. You can get rid of these, but there is usually a small fee.

These sites also have size limits, which you can increase, again for a small fee.

Note

With these free sites, you may not be allowed to use your own top-level domain (TLD) name unless you upgrade your type of account (usually for a small fee). Thus, instead of www.tullfamily.com, you’d be stuck with something like www.freehostservice.com/members/~tullfamily/index.html.
Although that may not matter to you (especially if your website’s a personal website), such a name may not look professional if your website is for a business.

Business Websites

There are a couple of different business website styles. Some business websites are essentially online versions of their brochures. These websites usually provide information about the company, its services, past experience, and contact information. You can probably get away with hosting such a website on your ISP or with a free web hosting service such as those mentioned in the previous section.

You’ll want to use a top-level domain for business sites, and one that isn’t too long or too difficult to read. Pick a website name that’s easy for visitors to read and remember. You’ll also want to pick a name that’s easily printable (and readable) on printed literature and business cards.

Tip

Check out your web hosting service. Your web host may offer a domain name free for a year when you sign up for a yearly hosting account.

E-commerce Websites

What if you want to create a website that sells products and services online (thus requiring the need to accept online payments)? Here’s where things can get complicated (and more expensive). You’ll probably want to shop around for a web hosting company that supports e-commerce.

The following are some tips on finding a good web hosting company for your e-commerce website:

  • The company should be able to help you with taking credit card orders online.

  • Avoid hosting companies that imply they can get you a merchant account. These are only available from banks.

  • Find a web host provider with at least one T-3 (45 Mbps) line connection to the Internet’s backbone, or to an “upstream” provider. Make sure the average bandwidth used is not greater than 30% of the available total.

  • As a rule of thumb, 25 MB of hard disk space holds about 500 web pages. Make sure the web hosting provider provides around this much disk space, with the ability to increase size easily. Also, make sure you can increase your disk space with a simple phone call.

  • An added plus is if the web hosting provider has easy-to-use software (like SoftCart or ShopSite) for building online catalogs.

  • Make sure the web hosting provider will help you with website security for your online transactions.

  • Prices vary, but expect to pay at least $100 per month. Startup fees can range from $50 to $150. Software (such as catalog applications) can range from $300 to over $3,000.


Publishing to the World Wide Web

After you’ve found where to park your website, you’re now ready to publish your pages to the World Wide Web. There are a couple ways to do this:

  • Using a web editor that has File Transfer Protocol (FTP) capability. Dreamweaver contains FTP capability, which makes it easy to transfer files.

    After connecting to your web hosting server, you simply “drag and drop” files using Dreamweaver.

  • Using a standalone FTP program. You can go to www.download.com. In the Search field at the top of the page, type FTP.

    You’ll find several free FTP programs that you can download. Some good ones include Coffee Cup Direct FTP, CuteFTP, FTP Explorer, and FTP Voyager.

Using Dreamweaver to Publish to the World Wide Web

Dreamweaver allows users to connect to a web server so you can use its FTP functionality to upload and update your web pages on the World Wide Web. Perform the following:

  1. In Dreamweaver, select Site ▶Manage Sites from the menu bar. The Manage Sites dialog box displays, as shown in Figure 12-1.

    Image from book
    Figure 12-1: Accessing the Manage Sites dialog box

  2. Press the New button. A drop-down menu displays. Select the FTP & RDS Server option, as shown in Figure 12-2.

    Image from book
    Figure 12-2: Selecting the FTP & RDS Server option

  3. The ConFigure Server dialog box displays, as shown in Figure 12-3.

    Image from book
    Figure 12-3: The ConFigure Server dialog box

  4. Complete this dialog box with your web server information and click OK. This dialog box allows you to connect Dreamweaver to a remote server using FTP access.

Once you’ve defined this information, Dreamweaver will conFigure your computer to the remote server. The Files panel (within Dreamweaver) will then display the contents of the remote server folder you connected to, and the server name appears in the pop-up menu at the top of the panel. You can then use the Put and Get arrows in the Files panel to upload and download web page files. Once files are uploaded, you can also work on them directly over the web by double-clicking them within the Files panel.

Tip

You only need to complete the ConFigure Server dialog box once for each server to which you wish to connect.

Your web hosting provider can provide you with the correct information for this dialog box. Here’s a summary of the information you’ll need for the ConFigure Server dialog box:

  • Name: Here you can create a name that appears in the pop-up menu within the Files panel. This name can be anything you like.

  • Access type: You’ll usually select FTP.

  • FTP host: This is the name of the FTP host to which you’ll upload your files.

    The FTP host is the full Internet name of the computer system, and usually looks something like ftp.hostserviceprovider.com. You don’t need to add the protocol name in front of your FTP name (for example, you don’t need to add http://).

    Your host service provider can provide you with this name.

  • Host directory: This is the area of the remote site where you’ll store the web pages that are visible to the public.

    Your host service provider can help you with this information if necessary.

  • Login: The login name to connect to the FTP server. Your host service provider can provide you with this name.

  • Password: The password to connect to the FTP server. Your host service provider can provide you with this word.

  • Use passive FTP: Use this if your firewall configuration requires use of passive FTP. Passive FTP allows your local computer (rather than the remote server) to set up the FTP connection. Check with your system administrator if you’re unsure whether to use passive FTP.

    Most users will probably keep this check box blank. However, if you’re on a company network, your system administrator may wish to set up the FTP connection locally (using passive FTP) for security reasons.

  • Use firewall: Allows you to connect to the remote server from behind a firewall. Check with your system administrator if you’re unsure whether to check the Use Firewall check box.

    For most users, you’ll probably keep this check box blank. However, if you’re on a company network, your system administrator may wish to set up an FTP connection behind your local firewall for security reasons.

  • Use Secure FTP (SFTP): Allows for secure FTP authentication. SFTP uses encryption and public keys to secure a connection to your testing server.


If You Build It, They Will Come…

Web design blends the shrewd mind of a master marketing communicator, the artistic eye of a graphic designer, and the technical know-how of a programmer. Part of the beauty of programs like Adobe Photoshop and Macromedia Dreamweaver is that while you need to be a shrewd communicator and have an artistic eye, you don’t have to have a technical background to survive or, for that matter, excel at web design.

However, you’ll find yourself a more skilled web designer if you constantly push yourself to learn. Explore those areas you know little to nothing about.

Building and getting your website on the World Wide Web is wonderful. However, the real challenge is to get visitors to keep coming back!


Appendix A: Top Ten Web Design Mistakes

The following are common (yet painful) web design mistakes to avoid. These are provided courtesy of Dr. Jakob Nielsen, and are a compilation of the top usability problems voted on by the readers of his newsletter. You can view this and other information at www.useit.com/alertbox/designmistakes.html.

Tip

If you’ve never heard the name Jakob Nielsen before, I strongly suggest you check out his site at www.useit.com. Dr. Nielsen has been called “the smartest person on the Web” (by ZDNet AnchorDesk), “the king of usability” (by Internet Magazine), and “the world’s leading expert on Web usability” (by U.S. News & World Report). Dr. Nielsen’s website provides a gold mine of useful web design information for web designers everywhere!

1. Legibility Problems

Bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.


2. Non-Standard Links

Following are the five main guidelines for links:

  • Make obvious what’s clickable: for text links, use colored, underlined text (and don’t underline non-link text).

  • Differentiate visited and unvisited links.

  • Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO). Don’t use “click here” or other-non-descriptive link text.

  • Avoid JavaScript or other fancy techniques that break standard interaction techniques for dealing with links.

  • In particular, don’t open pages in new windows (except for PDF files and such).

Links are the web’s number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site.


3. Flash

I view it as a personal failure that Flash collected the bronze medal for annoyance. It’s been three years since I launched a major effort to remedy Flash problems and published the guidelines for using Flash appropriately. When I spoke at the main Flash developer conference, almost everybody agreed that past excesses should be abandoned and that Flash’s future was in providing useful user interfaces.

Despite such good intentions, most of the Flash that web users encounter each day is bad Flash with no purpose beyond annoying people. The one bright point is that splash screens and Flash intros are almost extinct. They are so bad that even the most clueless web designers won’t recommend them, even though a few (even more clueless) clients continue to request them.

Flash is a programming environment and should be used to offer users additional power and features that are unavailable from a static page. Flash should not be used to jazz up a page. If your content is boring, rewrite text to make it more compelling and hire a professional photographer to shoot better photos. Don’t make your pages move. It doesn’t increase users’ attention, it drives them away; most people equate animated content with useless content.

Using Flash for navigation is almost as bad. People prefer predictable navigation and static menus.


4. Content That’s Not Written for the Web

Writing for the web means making content:

  • Short

  • Scannable

  • To the point (rather than full of fluffy marketese)

Web content should also:

  • Answer users’ questions

  • Use common language rather than made-up terms (this also improves search engine visibility, since users search using their own words, not yours)


5. Bad Search

Everything else on this list is pretty easy to get right, but unfortunately fixing search requires considerable work and an investment in better software. It’s worth doing, though, because search is a fundamental component of the web user experience and is getting more important every year.


6. Browser Incompatibility

I admit it: During my spring 2004 seminars, I downgraded cross- platform compatibility to a one-star guideline (that is, “worth thinking about if you have extra project time, but not a priority”). At that time, almost everybody used Internet Explorer and the business case for supporting other browsers was getting pretty tough to defend on an ROI basis.

Today, however, enough people use Firefox (and various other minority browsers, like Opera and Safari) that the business case is back: Don’t turn away customers just because they prefer a different platform.


7. Cumbersome Forms

People complained about numerous form-related problems. The basic issue? Forms are used too often on the web and tend to be too big, featuring too many unnecessary questions and options. In the long run, we need more of an applications metaphor for Internet interaction design. For now, users are confronted by numerous forms and we must make each encounter as smooth as possible. There are five basic guidelines to this end:

  • Cut questions that are not needed. For example, do you really need a salutation (Mr/Ms/Mrs/Miss/etc.)?

  • Don’t make fields mandatory unless they truly are.

  • Support autofill to the max by avoiding unusual field labels (just use Name, Address, etc.).

  • Set the keyboard focus to the first field when the form is displayed. This saves a click.

  • Allow flexible input of phone numbers, credit card numbers, and the like. It’s easy to have the computer eliminate characters like parentheses and extra spaces. This is particularly important for elderly users, who tend to suffer when sites require data entry in unfamiliar formats. Why lose orders because a user prefers to enter a credit card number in nicely chunked, four-digit groups rather than an undifferentiated, error-prone blob of 16 digits?

Forms that violate guidelines for internationalization got dinged by many overseas users. If entering a Canadian postal code generates an error message, you shouldn’t be surprised if you get very little business from Canada.


8. No Contact Information or Other Company Info

Even though phone numbers and e-mail addresses are the most requested forms of contact info, having a physical mailing address on the site might be more important because it’s one of the key credibility markers. A company with no address is not one you want to give money to.

For advice on how to best present contact info, see the usability studies of “About Us” pages (www.useit.com/alertbox/20031027.html) and store finders and locators (www.useit.com/alertbox/20010708.html).


9. Frozen Layouts with Fixed Page Widths

Complaints here fell into two categories:

  • On big monitors, websites are difficult to use if they don’t resize with the window. Conversely, if users have a small window and a page doesn’t use a liquid layout, it triggers insufferable horizontal scrolling.

  • The rightmost part of a page is cut off when printing a frozen page. This is especially true for Europeans, who use narrower paper (A4) than Americans.

Font sizes are a related issue. Assuming a site doesn’t commit mistake #1 and freeze the fonts, users with high-resolution monitors often bump up the font size. However, if they also want to bump up the window size to make the bigger text more readable, a frozen layout thwarts their efforts.

The very worst offenders are sites that freeze both the width and height of the viewport when displaying information in a pop-up window. Pop-ups are a mistake in their own right. If you must use them, don’t force users to read in a tiny peephole. At an absolute minimum, let users resize any new windows.


10. Inadequate Photo Enlargement

According to the vote count, #10 should really be about pop-ups, but I’ve written a lot about them already (most recently when they were rated the #1 most hated advertising technique). Instead, I want to feature here a problem that got a bit fewer votes, but illustrates a deeper point.

One of the long-standing guidelines for e-commerce usability is to offer users the ability to enlarge product photos for a close-up view. Seeing a tiny detail or assessing a texture can give shoppers the confidence they need to place an order online.

It’s gratifying that most sites obey this guideline and offer zoom features, often denoted by a magnifying glass icon. But many sites implement the feature wrong.

The worst mistake is when a user clicks the “enlarge photo” button and the site simply displays the same photo. It’s always a mistake to offer no-ops that do nothing when clicked. Such a do-nothing links and buttons add clutter, waste time, and increase user confusion: What happened? Did I do something wrong? (An even more common no-op mistake is to have a link on the homepage that links to the homepage itself. This was #10 on the list of most violated homepage guidelines.)

Another mistake here that’s almost as bad is when sites let users enlarge photos, but only by a fraction. When users ask for a big photo, show them a big photo. It’s often best to offer an enlargement that fills up the most common screen size used by your customers (1024x768 for B2C sites, at the time of this writing). Other times, this is insufficient, and it’s better to offer a range of close-ups to give users the details they need without requiring them to scroll a too-large photo.

Yes, initial pages should use small photos to avoid looking fluffy. Yes, you want to be aware of download times and watch your page- weight budget. Even in this broadband age, slow response times were #15 on the full list of design mistakes. But, when users explicitly ask for larger pictures, they’re willing to wait for them to download — unless that wait produces a mid-sized photo that lacks the details they need to make a purchasing decision.


Appendix B: Recommended Books

The following are recommended web design books by web design guru Dr. Jakob Nielsen. You can view this information at www.useit.com/books.

Web Design Books

Information Architecture for the World Wide Web (2nd Edition)
by Louis Rosenfeld and Peter Morville

The authors’ emphasis is on the structure of the site and how to facilitate users’ access to the information they need the most. Even though these are crucial issues in web usability, they are often overlooked in the quest for cool pages (that download slowly and are impossible to navigate). I liked the manuscript enough to write the foreword to both the first edition and the second edition.

Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them
by Jeff Johnson

As the title says, 60 of the most basic guidelines for web design. But the book is really much more than that because each guideline is discussed at length with many screenshots and examples. Also, the author is well-grounded in the basic principles of human-computer interaction, having many years experience in interaction design, so he explains why the mistakes are bad with reference to the underlying big picture. Truly an excellent book, and pretty easy to read because it’s structured according to the bloopers and the entertaining examples.

Adobe Master Class: Web Site Redesigns
by Darcy Dinucci

Based on the title, I almost discarded this book without reading it, despite having received a free review copy. After all, even though Photoshop is good software, it’s not exactly what’s important about web design, so why would one ever want to read a book from Adobe? A year later, I picked the book out of whatever pile it had gotten lost in and was happily surprised: It’s not about Adobe software at all, but a series of case studies of real websites and what worked and didn’t work in various versions of their designs. You have to translate these specific lessons into general guidelines yourself, but there are a lot of gems in the case studies. In particular, is it nice to see how iterative design was applied to gradually make the sites better, despite problems in their early releases.

Collaborative Web Development: Strategies and Best Practices for Web Teams
by Jessica R. Burdman

Why do most web projects fail? The most common problem is probably misguided goals (i.e., making a cool site rather than one that’s good for customers). But the second most common problem is doubtlessly project management. You could even argue that pushing back on damaging goals should be the first duty of the project manager. Anyway, this is the book on how to run a web project, what the different team members should do, and how to put together a good process. Oh yes, lack of process is another common reason for disaster.

E-Commerce User Experience
by Jakob Nielsen, Rolf Molich, Carolyn Snyder, and Susan Farrell

207 guidelines for how to design e-commerce sites to make them more usable. All guidelines are based on findings from detailed usability studies of 20 e-commerce sites with users in the United States and Europe.


Overviews for Beginners

Learning Web Design (2nd Edition)
by Jennifer Niederst

If you don’t want to go too “deep” in thinking about web design, then this book gives a quick and colorful overview of the main issues.

Son of Web Pages That Suck: Learn Good Design by Looking at Bad Design
by Vincent Flanders

The hardcopy version of Flanders’ celebrated website: less conceptual than Information Architecture but more fun. Truly, there are so many useless web pages out there that one can learn a lot from reading these well-argued criticisms. (The “son of” book is the second edition. Is it worth getting if you have already read the first edition? Depends on when you read it: If it’s more than two years ago, then yes, do get the second edition and laugh at the new examples. If you’ve read the first edition recently, then there will be no major benefits from reviewing the author’s “suckiness” principles.)


Implementation-Oriented Books

Speed Up Your Site: Web Site Optimization
by Andy King

All about response time and how to make it faster (i.e., better). Even broadband users benefit when web pages are faster, and if you have many dial-up users (or traveling users) you have to make response time one of the top priorities for your site. This book tells you how.

Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond
by Jennifer Niederst and Richard Koman

If you don’t know HTML, there are a million books to learn from. This one is a favorite of mine. The book does go beyond basic HTML 4.0 to explain CSS, graphics formats, and the differences between browsers (“platform idiosyncrasies” as the publisher delicately puts it).

Cascading Style Sheets: Designing for the Web (3rd Edition)
by Håkon Wium Lie and Bert Bos

Cascading style sheets (CSS) are without a doubt the way to manage presentation design across any medium- or large-size website. For once the blurb on a book cover is right: The authors are indeed “the world authorities” on stylesheets, having been the original leaders of the Web Consortium’s stylesheet project, so this is the ultimate reference for HTML stylesheets. Many examples of the slightly obscure features in CSS show how stylesheets can be used to achieve quite refined layouts and page designs. It would be nice to say that you can pick up CSS from simply looking at examples, but good use actually requires a deeper understanding, as provided by this textbook.

Philip and Alex’s Guide to Web Publishing
by Philip Greenspun

Once you have learned basic HTML you will soon outgrow simple page-based web publishing and need a structured publishing solution. This is a great book for understanding the issues in running a large site (or, actually, any sites that do something).

Java Look and Feel Design Guidelines

This is the official style guide from Sun Microsystems. I happen to know the lead author, who is an extremely experienced and talented senior user interface engineer. So the guidelines are sound advice. But the main reason to use the book for any Java project is that consistency is key to usability. Don’t invent your own weird interaction style when you can use proven ideas that users will know from other applets and applications. Also, by following the official rules, you will ensure that users with disabilities can use your interface. There are several other aspects of interaction design that are often overlooked in the heat of fast-moving Internet projects but are still important: Following the guidelines keeps you honest and guards against such design mistakes.


Appendix C: Web Designer’s Glossary

The following are key terms associated with the World Wide Web. You’ll probably run into several of these words as you delve into web design.

.aiff
A sound file format.
anchor
A synonym for hyperlink.
archie
A method of searching for files on anonymous FTP servers.
browser
A World Wide Web client. An information retrieval tool.
client
The software that allows users the ability to retrieve information through the World Wide Web.
CMYK
The colors cyan, magenta, yellow, and black. CMYK refers to process color reproduction, usually used in print work.
copy
Words within a document, including headings, subheads, body text, captions, pull quotes, footnotes, etc.
duotone
Image that prints using two halftones of the same image, each printed with a different color.
external viewer
A program used by Mosaic when Mosaic cannot handle a particular type internally, such as .ps or PostScript files. When Mosaic retrieves a .ps file, it will pass the file to a PostScript viewer and the viewer will display the file to the user.
FAQ
A file that contains frequently asked questions and their answers.
font
A general term used to refer to a complete set of type characters.
FTP
File Transfer Protocol. A method of transferring files to and from computers.
GIF
Graphics Interchange Format. A bitmapped graphics file format used by the World Wide Web. GIF supports color and various resolutions. It also includes data compression, but because it is limited to 256 colors, it is more effective for scanned images such as illustrations rather than color photos.
home page
The main page of a website. The home page usually serves as a launching place or index to other pages within a website.
hot spot
An area of a graphic or text that activates a function when selected (such as rolling your cursor over that area or pressing your mouse button). Hot spots may perform such activities as displaying another graphic, running a video, or opening a new window of information.
hotlist
A user-defined list of preferred URLs to a given World Wide Web document.
HTML
Hypertext Markup Language. Used to define various components of a web document.
HTTP
Hypertext Transport Protocol. The protocol used by the World Wide Web.
hyperlink
A link in a given document to information within another document. Highlighted and underlined words or images usually represent hyperlinks.
hypermedia
Richly formatted documents containing various information such as text, images, movies, and audio.
image editing
Process of manipulating photographs and other images with various software programs.
images
Photographs, illustrations, or other graphics used alone or with copy.
in-line media
A graphic image displayed with an HTML document.
Internet
An international computer network of networks that connect government, academic, and business institutions.
JPEG
Joint Photographic Experts Group. JPEG is a compression technique for color images. Although it can reduce file sizes to about 5% of their normal size, some detail is lost in the compression.
kerning
The addition or subtraction of space between characters. Also called letterspacing.
logo
A combination of letters, words, or symbols that, at a glance, identifies the nature of a product or service and defines your attitude about it.
MacTCP
The necessary network software from Apple Computer that allows Macintoshes to interact with other computers by TCP/IP.
MIME
Multiple Internet Mail Extensions. A method of identifying files such as the first packet of information received by a client. MIME contains information about the file the server has sent.
MPEG
Moving Pictures Experts Group. A method of storing movie files in this format.
navigation
Process of moving from page to page within a website by clicking on various buttons or hyperlinks.
page layout
Configuration or flow of information presented through text and graphics on a page.
PNG
Portable Network Graphics. A bitmapped graphics format similar to GIF. In fact, PNG was approved as a standard by the World Wide Web consortium to replace GIF because GIF uses a patented data compression algorithm called LZW. In contrast, PNG is patent free and license free. The most recent versions of Netscape Navigator and Microsoft Internet Explorer now support PNG.
PostScript
A page description language developed by Adobe Systems.
protocol
A planned method of exchanging data over the Internet.
QuickTime
A method of storing movie and audio files in a digital format. Developed by Apple Computer.
raster art
Artwork created from pixels.
RFC
Request for Comments. The agreed-on standards in which the methods of communicating over the Internet are defined.
RGB
The colors red, green, and blue. Television and computer monitors display colors specified as RGB values.
sans serif
Type character that does not have an end stroke, or “foot.”
serif
The end stroke, or “foot,” of a type character.
server
A computer that serves information and software to the Internet computer.
SGML
Standard Generalized Markup Language. An international standard encoding scheme for creating textual information.
TCP/IP
Transmission Control Protocol/Internet Protocol. A set of rules that establish the method by which data is transmitted over the Internet between two computers.
TIFF
Tagged Image File Format. A file format used for storing image files.
TLD
Short for top-level domain, it refers to the suffix attached to Internet domain names. There are a limited number of predefined suffixes, and each one represents a top-level domain.
URL
Uniform Resource Locator. The address to a source of information. A URL contains four distinct parts: the protocol type, the machine name, the directory path, and the file name.
vector art
Artwork created from mathematically defined lines and curves.
WAIS
Wide Area Information Server. A database.
web page
A document on the World Wide Web. Every web page is identified by a unique URL.
website
A site (location) on the World Wide Web. Each website contains a home page, which is the first document users see when they enter the site. The site might also contain additional documents and files. Each site is owned and managed by an individual, company, or organization.
white space
Blank or open areas left on a page.
World Wide Web
A system of Internet servers that support specially formatted documents. The documents are formatted in a markup language called HTML that supports links to other documents, as well as graphic, audio, and video files. This means you can jump from one document to another simply by clicking on hot spots. Not all Internet servers are part of the World Wide Web.


Index

A

Add Anchor Point tool, 109
Add Layer Mask option (Layers palette), 37
Add Layer Style option (Layers palette), 36
Add to Selection option (Marquee tools), 81
anchor points, 102
Anti-alias option (Marquee tools), 83
anti-aliasing, 83


Previous Page
Next Page

Index

B

background images, see also web
backgrounds
adding, 219-220
creating, 157-160
defining, 215
sizing, 140
Background layer, 39
backgrounds, see background images and web backgrounds
bitmap images, 10-11
Blend mode control (Layers palette), 35
blending effects, adding to web button, 64-65
blending options (layers), 40-41
changing settings for, 44-46
using, 44-46
BMP, 12
browser incompatibility, 234-235
burning, photos, 208-211
business website, 225


Previous Page
Next Page

Index

C

circle, creating, 60
CMYK, 8
color, adding to selections, 111
selecting, 61-62
Color option (Pen tool), 101
Configure Server dialog box, 228-230
contact information, lack of, 236
content, adding to web page, 220-221
creating window for, 182-184
inappropriate, 234
Convert Point tool, 109
adjusting path with, 110
Create New Fill or Adjustment Layer
option (Layers palette), 37
Create New Layer option (Layers
palette), 37
Create New Layer Style option (Layers
palette), 37
Crop tool, 58
options, 88-89
Custom Shape tool, using, 29-31


Previous Page
Next Page

Index

D

Delete Anchor Point tool, 109
Delete Layer option (Layers palette), 37
design requirements
for logos, 16-17
for web buttons, 56
digital images, 7 see also images
colors of, 7-8
dimensions of, 8-10
formats of, 10
Direct Selection tool, 106
adjusting path with, 107-109
Document toolbar (Dreamweaver), 153-154
dodging, photos, 208-211
dots per inch, see dpi
dpi, 11
Dreamweaver, 149-150, 152
Code layout, 150-151
Design layout, 150-151
Document toolbar, 153-154
downloading, 150
editing web page in, 186-189, 214
Insert bar, 155-156
Properties inspector, 156-157
Standard toolbar, 154
using to publish to the World Wide Web, 227-230
duotone tinting, 123
adding to images, 123-126


Previous Page
Next Page

Index

E

e-commerce website, 225-226
Elliptical Marquee tool, 59-60


Previous Page
Next Page

Index

F

Feather option (Marquee tools), 82
Fill control (Layers palette), 35
Fill Pixels option (Pen tool), 100
Flash, problems with, 233
forms, problems with, 235
frames, 168
Freeform Pen tool, 100


Previous Page
Next Page

Index

G

GIF, 133
using, 12
gradient, adding to web page, 216
creating, 140-143
graphics, adding text to, 180-182
adding to logo, 29-31
adding to web page, 177-180
Graphics Interchange Format, see GIF


Previous Page
Next Page

Index

H

headers, see web headers
hobby website, 234
HTML, 6
hyperlinks, 6
guidelines for, 232
hypertext, 5
Hypertext Markup Language, see HTML


Previous Page
Next Page

Index

I

image resolution, 11-12
images, see also digital images
adding duotone tinting to, 123-126
adding to web page, 204-205
adding watermark to, 118-122
combining, 78-79, 82-84, 91
converting to web page, 132-134
creating, 20
creating selection from, 62-64
cropping, 86-87
defining as background images, 157-160
moving, 26
pulling into web page, 126-128
separating, 85-86
sizing errors, 237-238
slicing, 128-129, 212-213
using selections with, 77
Insert bar (Dreamweaver), 155-156
Intersect with Selection option (Marquee
tools), 82


Previous Page
Next Page

Index

J

Joint Photographic Experts Group, see JPEG
JPEG, 133
using, 12


Previous Page
Next Page

Index

L

Lasso tool, 93
Lasso tools, 58, 92-93
creating selections with, 93-95
Layer control (Layers palette), 35
Layer Lock options (Layers palette), 38
Layer Modification options (Layers palette), 36-37
layer sets, 37
creating, 51-52
Layer Style dialog box, 43
Layer Style option (Pen tool), 101
layer styles, 40
accessing, 41-43
copying, 46-48
layers, 34
adding patterns to, 48-50
advantages of, 33
blending options, 40-41
creating, 22
managing, 50-52
naming, 23
reordering, 50-51
selecting, 23
style options, 41
unlocking, 39-40
using, 22-23
Layers palette, 34
controls, 35
options, 36-38
layouts, frozen, 236-237
legibility, 232
lines, creating with the Pen tool, 101-105
drawing with the Pencil tool, 27-29
Link Layers option (Layers palette), 36
Lock All option (Layers palette), 38, 40
Lock Image Pixels option (Layers palette), 38
Lock Position option (Layers palette), 38
Lock Transparent Pixels option (Layers palette), 38
logos, 15
adding graphics to, 29-31
adding patterns to, 48-50
changing blending options, 44-46
copying layer styles, 46-48
creating, 174-177, 192-194
creating text for, 27
design requirements, 16-17


Previous Page
Next Page

Index

M

Magic Wand tool, 59
Magnetic Lasso tool, 93
Marquee tool options, 79-80
Marquee tools, 58
creating shapes with, 60-61
using, 79-84
measurement, changing units of, 21-22
menu sections, creating, 201-204
menus, adding to navigation bar, 198-201
Move tool, 58
using, 26


Previous Page
Next Page

Index

N

navigation bar, adding menus to, 198-201
creating, 168-174, 194-195
New Selection option (Marquee tools), 81


Previous Page
Next Page

Index

O

Opacity control (Layers palette), 35
Option Selector (Pen tool), 100


Previous Page
Next Page

Index

P

Painting tools, 59
Path Selection tool, 105
moving path with, 106-107
Path Selection tools, 105-106
paths, adjusting, 107-109, 110
changing to selections, 111
creating with the Pen tools, 101-105
moving, 106-107
Paths option (Pen tool), 100
patterns, adding to layers, 48-50
adding to selections, 112-113
Pen tool, 98
using to create curved lines, 101-103
using to create straight lines, 103-105
Pen tools, 59, 99-101
Pencil tool, using to draw lines, 27-29
personal website, 234
perspective, adjusting, 89-90
photography filters, using, 205-212
Photoshop, menu bar, 19
palettes, 19
setting preferences in, 21
splash screen, 17
starting, 17
toolbox, 19, 24
work area, 18-19
pixels, 7, 10
pixels per inch, see ppi
PNG, 12, 133
Point tools, 109
Polygonal Lasso tool, 93
Portable Network Graphics, see PNG
ppi, 11
preset styles, using, 67-69
Properties inspector (Dreamweaver), 156-157


Previous Page
Next Page

Index

R

raster images, see bitmap images
Rectangular Marquee tool, 59-60
RGB, 8
rollover buttons, creating, 160-164
rollover effects, 69
creating, 69-72


Previous Page
Next Page

Index

S

sans-serif fonts, 192
screen resolution, 8
search, problems with, 234
Selection tools, 57-59
selections, 55-56
adding patterns to, 112-113
changing paths to, 111
creating from image, 62-64
creating with Lasso tools, 93-95
filling with color, 111
using with images, 77
Set/Change Properties option (Pen tool), 101
Shape Area Options option (Pen tool), 100
Shape Options option (Pen tool), 100
Shapes option (Pen tool), 100
Single Column Marquee tool, 59-60
Single Row Marquee tool, 59-60
Slice tool, 59, 128-129
using, 130-131, 185-186
slices, 129
creating, 185-186
slivers, adding to web page, 216, 219-220
creating, 143-144
Standard Bit-Mapped Graphics Format, see BMP
Standard Pen tool, 100
Standard toolbar (Dreamweaver), 154
style options (layers), 41
Style options (Marquee tools), 84
styles, using preset, 67-69
Subtract from Selection option (Marquee tools), 82


Previous Page
Next Page

Index

T

table cells, 217-218
merging, 218-219
tables, 185
Tagged Image File Format, see TIFF
text, adding to graphic, 180-182
adding to web button, 65-66
adding to web page, 164-165
creating, 25-26
creating for logo, 27
TIFF, 12
tiling, 139
fixing problems with, 143-144, 218-219
tool presets, 80-81
toolbox (Photoshop), 19, 24
selecting colors with, 61-62


Previous Page
Next Page

Index

V

vector images, 13-14
Visibility toggle (Layers palette), 35


Previous Page
Next Page

Index

W

watermark, 118
adding to images, 118-122
creating, 195-198
web, see World Wide Web
web backgrounds, 137-138 see also
background images
types of, 138-139
web buttons, adding effects to, 64-65
adding text to, 65-66
creating, 60-64
creating rollover effect, 69-72
design requirements, 56
using preset styles with, 67-69
web design mistakes, 231-238
web design, resources for, 239-245
web editor, advantages to using, 149
web headers, 97
creating, 98-99, 101-105, 106-108, 110-113
web pages, adding content to, 220-221
adding graphics to, 177-180
adding images to, 204-205
adding text to, 164-165
converting images to, 132-134
defining, 116-117
editing, 186-189
editing in Dreamweaver, 214
previewing, 165
pulling images into, 126-128
websites, types of, 223-224
World Wide Web, 3-5
components of, 5
navigating, 6
origins of, 3
publishing to, 226-230
WYSIWYG, 150-151


List of Figures

Introduction

Figure 1: The exponential growth of the internet

Chapter 1: The World of Web Design

Figure 1-1: An example of an early web page
Figure 1-2: An example of the graphical nature of the World Wide Web
Figure 1-3: Hyperlinks on a web page
Figure 1-4: Viewing the same web page at different monitor settings Courtesy of www.disney.com
Figure 1-5: Viewing a pixelated image
Figure 1-6: A web button
Figure 1-7: Resizing a vector image with no loss in quality

Chapter 2: Getting Started with Photoshop

Figure 2-1: The Photoshop work area
Figure 2-2: Creating a new image
Figure 2-3: Changing the default measurement units to display pixels
Figure 2-4: Creating a new layer with the Layers palette
Figure 2-5: Renaming a layer
Figure 2-6: Familiarizing yourself with Photoshop’s toolbox
Figure 2-7: Defining text settings in the Character palette
Figure 2-8: Creating and formatting text
Figure 2-9: Adding subtext to your logo
Figure 2-10: Changing a pencil mark’s diameter
Figure 2-11: Creating and transforming a line
Figure 2-12: Selecting a shape from the Custom Shape tool’s options bar
Figure 2-13: Adding a graphical element from the shapes menu to your logo

Chapter 3: Working with Layers

Figure 3-1: Exploring the Layers palette
Figure 3-2: Exploring the Layer Modification options of the Layers palette
Figure 3-3: Exploring the Layer Lock options of the Layers palette
Figure 3-4: A locked Background layer
Figure 3-5: Unlocking a locked layer with the New Layer dialog box
Figure 3-6: Selecting styles for your layers
Figure 3-7: The Layer Style dialog box
Figure 3-8: Changing settings of the Bevel and Emboss blending option
Figure 3-9: Changing the color overlay in the Color Picker dialog box
Figure 3-10: Copying layer styles from one layer to another
Figure 3-11: Adding blending options to your logo
Figure 3-12: Accessing preset patterns
Figure 3-13: Spicing up your logo with a light marble pattern
Figure 3-14: Changing the layer order
Figure 3-15: Organizing layers with layer sets

Chapter 4: Creating Shapes with Selections

Figure 4-1: Finding Photoshop’s Selection tools
Figure 4-2: Exploring the Marquee tools
Figure 4-3: Creating an elliptical selection
Figure 4-4: Selecting a foreground color
Figure 4-5: Selecting a single column of pixels from an image
Figure 4-6: Moving an isolated area of an image
Figure 4-7: Free Transforming a one-pixel column
Figure 4-8: Adding blending effects to your web button
Figure 4-9: Changing the text options from the Character palette
Figure 4-10: Adding text to your web button
Figure 4-11: Accessing Photoshop’s preset styles
Figure 4-12: Selecting a preset style for your web button
Figure 4-13: Adding a dark red bevel style to your web button
Figure 4-14: Accepting your duplicate layers
Figure 4-15: Changing the pattern overlay
Figure 4-16: Selecting the Blue Crepe pattern
Figure 4-17: Selecting the Blue Crepe pattern
Figure 4-18: The pushed-down effect of your Home mouseover button

Chapter 5: Combining Images

Figure 5-1: Opening existing files in Photoshop
Figure 5-2: Exploring the Marquee tool options
Figure 5-3: Exploring the Tool Preset option
Figure 5-4: Exploring selection options
Figure 5-5: The Feather option
Figure 5-6: Normal versus anti-aliased curves
Figure 5-7: Checking the Anti-alias check box
Figure 5-8: Setting the Style option to Normal
Figure 5-9: Creating a new selection
Figure 5-10: Dragging a selection onto another image
Figure 5-11: Defining an area to crop from an image
Figure 5-12: Cropping an image
Figure 5-13: Viewing the Crop tool options (available before cropping)
Figure 5-14: Viewing the Crop tool options (available after cropping)
Figure 5-15: Changing the perspective of a crop selection
Figure 5-16: Adjusting the perspective of an image
Figure 5-17: Combining multiple images
Figure 5-18: Exploring the Lasso tools
Figure 5-19: Using the Magnetic Lasso tool
Figure 5-20: Exploring the Magnetic Lasso tool’s options
Figure 5-21: Adding the Mr: Bing selection to your combined images

Chapter 6: Creating Web Headers

Figure 6-1: Viewing the Pen tools from the toolbox
Figure 6-2: Exploring options of the Pen tool
Figure 6-3: Creating a point with the Pen tool
Figure 6-4: Creating a curve with the Pen tool
Figure 6-5: Continuing a path with the Pen tool
Figure 6-6: Creating straight lines with the Pen tool
Figure 6-7: Closing your path
Figure 6-8: Exploring the Path Selection tools
Figure 6-9: Moving a path with the Path Selection tool
Figure 6-10: Working with the Direct Selection tool
Figure 6-11: Dragging an anchor point
Figure 6-12: Dragging a direction line with the Direct Selection tool
Figure 6-13: Changing the curvature of a path with the Convert Point tool
Figure 6-14: Filling your web header path with color
Figure 6-15: Spicing up the Jonathan Bing web header

Chapter 7: Pulling a Web Page Together

Figure 7-1: Using some of your images for the Bing website
Figure 7-2: Defining a web page for 800x600 screen resolution
Figure 7-3: Defining the Bing home page
Figure 7-4: Defining the character for your watermark
Figure 7-5: Creating a watermark
Figure 7-6: Changing the layer’s blending mode from Normal to Overlay
Figure 7-7: Transforming and rotating your watermark
Figure 7-8: Selecting an area within your layer
Figure 7-9: Selecting the inverse of a selection
Figure 7-10: Finishing up your watermarked web header
Figure 7-11: Defining your duotone layer
Figure 7-12: Changing the blending mode for your duotone tinting
Figure 7-13: Adding duotone tinting to your image
Figure 7-14: Lessening duotone tinting through desaturation
Figure 7-15: Creating a selection around your duotone image
Figure 7-16: Deleting unwanted areas from your image
Figure 7-17: Combining the web header and logo
Figure 7-18: Resizing the title bar image
Figure 7-19: Dragging the title bar image below the web header
Figure 7-20: Selecting an image with the Slice tool
Figure 7-21: Slicing an image further with the Slice tool
Figure 7-22: Adding another slice as a place for more content
Figure 7-23: Saving your Photoshop image for the World Wide Web
Figure 7-24: Using the Save Optimized As dialog box
Figure 7-25: Viewing your web page in a web browser

Chapter 8: Creating Web Backgrounds

Figure 8-1: Using busy backgrounds for web pages is a no-no
Figure 8-2: Small images that make up a web page background
Figure 8-3: Selecting the Gradient tool
Figure 8-4: Defining a gradient with the Gradient tool
Figure 8-5: Viewing the gradient background image
Figure 8-6: Viewing a tiled web page background
Figure 8-7: Creating a 1-pixel high sliver

Chapter 9: Working with Dreamweaver

Figure 9-1: Viewing the Dreamweaver main menu
Figure 9-2: Looking at the Dreamweaver environment
Figure 9-3: Working with the Document toolbar
Figure 9-4: Exploring the Standard toolbar
Figure 9-5: Working with the Insert bar
Figure 9-6: Working with the Properties inspector
Figure 9-7: Deleting images from your web page
Figure 9-8: Defining a background image
Figure 9-9: Accessing images from the Select Image Source dialog box
Figure 9-10: Defining background images in a web page
Figure 9-11: Changing all graphics to background images
Figure 9-12: Changing the vertical alignment of a table cell
Figure 9-13: Inserting a rollover image
Figure 9-14: Defining the Home rollover button
Figure 9-15: Adding rollover buttons to your web page
Figure 9-16: Adding text to your web page
Figure 9-17: Viewing your web page in a web browser

Chapter 10: Creating a “Professional” Web Page Style

Figure 10-1: Creating a navigation bar
Figure 10-2: Defining your selection
Figure 10-3: Defining the bevel and emboss options to create a metallic effect
Figure 10-4: Defining a metallic gradient overlay
Figure 10-5: Adding a black gradient arrow to the gradient bar
Figure 10-6: Creating an alternating black-white gradient
Figure 10-7: Creating a navigation bar with a metallic gradient
Figure 10-8: Defining the Jackson Steel Company logo
Figure 10-9: Creating the Jackson Steel Company logo
Figure 10-10: Selecting the Text Effects 2 style
Figure 10-11: Creating a metallic logo
Figure 10-12: Creating a steel plate graphic
Figure 10-13: Adding noise to your steel plate graphic
Figure 10-14: Defining a motion blur
Figure 10-15: Adding effects to your steel plate graphic
Figure 10-16: Adding text to the steel plate
Figure 10-17: Finishing your steel plate graphic
Figure 10-18: Creating a gradient with the Gradient tool
Figure 10-19: Filling your contents window with a light gray gradient
Figure 10-20: Creating a contents window for your website
Figure 10-21: Slicing your image
Figure 10-22: Opening the Jackson Steel web page in Dreamweaver
Figure 10-23: Defining a table inDreamweaver
Figure 10-24: Setting up tables (without borders) for your web page content
Figure 10-25: Viewing the Jackson Steel web page in a web browser

Chapter 11: Designing a “Modern” Web Page Style

Figure 11-1: Defining the San Simeon Software logo
Figure 11-2: Typing the San Simeon logo
Figure 11-3: Coloring a portion of your logo
Figure 11-4: Drawing a navigational menu bar
Figure 11-5: Drawing an oval watermark
Figure 11-6: Adding to your watermark shape
Figure 11-7: Transforming the watermark to fit the navigational bar
Figure 11-8: Creating a duplicate layer for your watermark
Figure 11-9: Defining the navigational menu text
Figure 11-10: Adding a menu to your navigational bar
Figure 11-11: Adding a Services menu to your navigational bar
Figure 11-12: Adding a Site Index menu to your navigational bar
Figure 11-13: Creating a colored menu section
Figure 11-14: Adding text to the Company colored menu
Figure 11-15: Adding the Solutions text to your Solutions colored menu
Figure 11-16: Selecting images to use in the San Simeon Software website
Figure 11-17: Selecting the photo filters
Figure 11-18: Selecting the Cooling Filter (82) lens filter
Figure 11-19: Adding a software image to the San Simeon Software website
Figure 11-20: Creating a new layer from the Layers palette
Figure 11-21: Defining your new layer
Figure 11-22: Selecting a soft-edged brush
Figure 11-23: Using a dodge effect to lighten up dark areas
Figure 11-24: Using a burn effect to darken light areas
Figure 11-25: Adding a customer service photo to the San Simeon Software website
Figure 11-26: Slicing your image in Photoshop
Figure 11-27: Opening the San Simeon web page in Dreamweaver
Figure 11-28: Adding a background image to your web page
Figure 11-29: Selecting the Layout mode from the Insert bar
Figure 11-30: Adding a table cell with the Draw Layout Cell option
Figure 11-31: Viewing the results of adding cells to your web page
Figure 11-32: Merging table cells
Figure 11-33: Adding background and sliver images
Figure 11-34: Adding content to your web page

Chapter 12: Going Live with Your Website

Figure 12-1: Accessing the Manage Sites dialog box
Figure 12-2: Selecting the FTP & RDS Server option
Figure 12-3: The ConFigure Server dialog box


List of Tables

Chapter 1: The World of Web Design

Table 1-1: Sizes to use to account for screen and browser dimensions

Chapter 2: Getting Started with Photoshop

Table 2-1: Requirements for logos checklist
Table 2-2: Elements of the Photoshop workspace

Chapter 3: Working with Layers

Table 3-1: The different controls of the Layers palette

Chapter 4: Creating Shapes with Selections

Table 4-1: Understanding Photoshop’s Selection tools